@shoplflow/base 0.32.41 → 0.32.42

package/dist/index.cjs

@@ -856,6 +856,9 @@ var FooterContainer = styled6__default.default.div`
   border-top: 1px solid ${exports.colorTokens.neutral300};
   background: ${exports.colorTokens.neutral0};
 `;
+var BottomContainer = styled6__default.default.footer`
+  width: 100%;
+`;
 
 // src/components/Modal/Modal.types.ts
 exports.ModalSize = {
@@ -882,6 +885,27 @@ var useViewportSizeObserver = () => {
   }, []);
   return size2;
 };
+var ModalOptionContext = React3.createContext({
+  heightToDeduct: 0,
+  setHeightToDeduct: utils.noop,
+  clearHeightToDeduct: utils.noop
+});
+var ModalOptionContextProvider = ({ children }) => {
+  const [heightToDeduct, setHeightToDeduct] = React3.useState(0);
+  const controlHeightToDeduct = React3.useCallback((heightToAdd) => {
+    setHeightToDeduct((prev) => prev + heightToAdd);
+  }, []);
+  const clearHeightToDeduct = React3.useCallback(() => {
+    setHeightToDeduct(0);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ModalOptionContext.Provider,
+    {
+      value: { heightToDeduct, setHeightToDeduct: controlHeightToDeduct, clearHeightToDeduct },
+      children
+    }
+  );
+};
 var ModalContainer = (_a) => {
   var _b = _a, { children, height, outsideClick = utils.noop } = _b, rest = __objRest(_b, ["children", "height", "outsideClick"]);
   const ref = utils.useParentElementClick(outsideClick);
@@ -916,7 +940,7 @@ var ModalContainer = (_a) => {
       height: heightWidthMargin
     });
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: addPropInChildren }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: /* @__PURE__ */ jsxRuntime.jsx(ModalOptionContextProvider, { children: addPropInChildren }) }));
 };
 var ModalContainer_default = ModalContainer;
 var ModalFooter = ({ children }) => {
@@ -954,6 +978,13 @@ var ScrollArea = React3.forwardRef((_a, ref) => {
   ) });
 });
 exports.ScrollArea = ScrollArea;
+var useModalOption = () => {
+  const context = React3.useContext(ModalOptionContext);
+  if (!context) {
+    throw new Error(`useModalOption cannot be called outside the ModalOptionProvider`);
+  }
+  return context;
+};
 var ModalBody = ({
   children,
   isIncludeHeader = false,
@@ -962,6 +993,7 @@ var ModalBody = ({
   height: modalContainerHeight
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
+  const { heightToDeduct } = useModalOption();
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
@@ -983,11 +1015,11 @@ var ModalBody = ({
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
         if (windowHeight < modalContainerHeight) {
-          return windowHeight - topBottomMargin - headerFooterHeight;
+          return windowHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
         }
-        return modalContainerHeight - topBottomMargin - headerFooterHeight;
+        return modalContainerHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
       }
-      return modalContainerHeight - topBottomMargin - headerFooterHeight;
+      return modalContainerHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
     } else {
       return "100%";
     }
@@ -1014,32 +1046,23 @@ var ModalBody = ({
     }
     return 0;
   };
-  const setContentHeightMax = () => {
-    let autoHeightMax = setAutoHeightMax();
-    autoHeightMax = autoHeightMax - 24;
-    if (isIncludeHeader) {
-      autoHeightMax = autoHeightMax - 24;
-    }
-    if (!isIncludeHeader) {
-      autoHeightMax = autoHeightMax - 16;
-    }
-    return autoHeightMax;
-  };
+  const autoHeightMin = setAutoHeightMin();
+  const _autoHeightMin = typeof autoHeightMin === "string" ? autoHeightMin : autoHeightMin - heightToDeduct;
   return /* @__PURE__ */ jsxRuntime.jsx(
     BodyContainer,
     {
       isIncludeHeader,
       sizeVar,
-      minHeight: setAutoHeightMin(),
-      maxHeight: setAutoHeightMax(),
+      minHeight: _autoHeightMin,
+      maxHeight: setAutoHeightMax() - heightToDeduct,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         exports.ScrollArea,
         {
           id: `scrollbar`,
           universal: true,
           autoHeight: !modalContainerHeight,
-          autoHeightMin: setAutoHeightMin(),
-          autoHeightMax: setContentHeightMax(),
+          autoHeightMin: _autoHeightMin,
+          autoHeightMax: "100%",
           style: {},
           children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
         }
@@ -1053,6 +1076,33 @@ var ModalHeader = ({ children }) => {
 };
 ModalHeader[exports.MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
+var ModalTop = ({ children }) => {
+  const [topRef, setTopRef] = React3.useState(null);
+  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  React3.useEffect(() => {
+    if (!topRef) {
+      return;
+    }
+    const { height } = topRef.getBoundingClientRect();
+    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
+    return () => clearHeightToDeduct();
+  }, [topRef, setHeightToDeduct, clearHeightToDeduct]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setTopRef, children });
+};
+var ModalTop_default = ModalTop;
+var ModalBottom = ({ children }) => {
+  const [bottomRef, setBottomRef] = React3.useState(null);
+  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  React3.useEffect(() => {
+    if (!bottomRef) {
+      return;
+    }
+    const { height } = bottomRef.getBoundingClientRect();
+    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
+    return () => clearHeightToDeduct();
+  }, [bottomRef, setHeightToDeduct, clearHeightToDeduct]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BottomContainer, { ref: setBottomRef, children });
+};
 exports.ModalHandlerContext = React3.createContext({
   addModal: utils.noop,
   removeModal: utils.noop
@@ -1147,7 +1197,9 @@ var ModalProvider_default = ModalProvider;
 exports.Modal = {
   Container: ModalContainer_default,
   Header: ModalHeader_default,
+  Top: ModalTop_default,
   Body: ModalBody_default,
+  Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
 var SwitchContainer = styled6__default.default.div`

package/dist/index.d.cts

@@ -504,6 +504,10 @@ declare const MODAL_FOOTER_KEY: unique symbol;
 interface ModalFooterType extends React.FC<ModalBodyProps> {
     [MODAL_FOOTER_KEY]?: boolean;
 }
+interface ModalTopProps extends ChildrenProps {
+}
+interface ModalBottomProps extends ChildrenProps {
+}
 
 declare type ModalStateType = {
     component: ReactNode;
@@ -537,7 +541,9 @@ declare const useHandleModal: () => {
 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;
+    Bottom: ({ children }: ModalBottomProps) => react_jsx_runtime.JSX.Element;
     Footer: ModalFooterType;
 };
 
@@ -1524,4 +1530,4 @@ declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAtt
 
 declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, floatingZIndex, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.d.ts

@@ -504,6 +504,10 @@ declare const MODAL_FOOTER_KEY: unique symbol;
 interface ModalFooterType extends React.FC<ModalBodyProps> {
     [MODAL_FOOTER_KEY]?: boolean;
 }
+interface ModalTopProps extends ChildrenProps {
+}
+interface ModalBottomProps extends ChildrenProps {
+}
 
 declare type ModalStateType = {
     component: ReactNode;
@@ -537,7 +541,9 @@ declare const useHandleModal: () => {
 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;
+    Bottom: ({ children }: ModalBottomProps) => react_jsx_runtime.JSX.Element;
     Footer: ModalFooterType;
 };
 
@@ -1524,4 +1530,4 @@ declare type NumberComboboxProps = NumberComboboxOptionProps & Omit<InputHTMLAtt
 
 declare const NumberCombobox: ({ disabled, onSelect, onChange, value, width, onBlur, items, isError, sizeVar, placeholder, maxLength, className, floatingZIndex, ...rest }: NumberComboboxProps) => react_jsx_runtime.JSX.Element;
 
-export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };
+export { AnnualDatepicker, AnnualDatepickerProps, AsProp, Avatar, AvatarOptionProps, AvatarProps, AvatarSizeVariantType, AvatarSizeVariants, BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVariantType, ButtonSizeVariants, ButtonStyleVariantType, ButtonStyleVariants, CHECKBOX_SYMBOL_KEY, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, Checkbox, CheckboxOptionProps, CheckboxProps, CheckboxStyleVariantType, CheckboxStyleVariants, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, DangerouslySetInnerHTML, DayCalendarType, DayDatepicker, DayDatepickerHeaderCustomProps, DayDatepickerOptionProps, DayDatepickerProps, DayDatepickerSizeVariantType, DayDatepickerSizeVariants, DomainType, Dropdown, DropdownButton, DropdownButtonContext, DropdownButtonContextType, DropdownButtonOptionProps, DropdownButtonProps, DropdownButtonSizeVariantType, DropdownButtonSizeVariants, DropdownButtonStyleVariantType, DropdownButtonStyleVariants, DropdownContentProps, DropdownOptionProps, DropdownOptionVariantType, DropdownProps, DropdownSizeVariantType, DropdownTriggerButtonProps, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVariantType, IconButtonSizeVariants, IconButtonStyleVariantType, IconButtonStyleVariants, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, Input, InputButton, InputButtonOptionProps, InputButtonProps, InputOptionProps, InputProps, InputSizeVariantType, InputSizeVariants, List, ListContent2ColumnsProps, ListOptionProps, ListProps, ListText2RowsProps, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, Menu, MenuOptionProps, MenuProps, MenuSizeVariantType, MenuSizeVariants, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalBottomProps, ModalContainerOptionProps, ModalContainerProps, ModalContext, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHandlerContext, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, ModalStateType, ModalTopProps, MonthClickDateInfo, MonthDatepicker, MonthDatepickerProps, MonthDatepickerStyleType, MotionStack, MotionStackComponentType, MotionStackContainer, MotionStackContainerComponentType, NumberCombobox, NumberComboboxErrorType, NumberComboboxInputType, NumberComboboxOptionProps, NumberComboboxProps, NumberComboboxSizeVariantType, NumberComboboxSizeVariants, Pagination, PaginationOptionProps, PaginationProps, PaginationSizeSelectorProps, PolymorphicComponentProps, PolymorphicRef, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, RADIO_SYMBOL_KEY, Radio, RadioOptionProps, RadioProps, RemoveModalProps, ScrollArea, ScrollAreaOptionProps, ScrollAreaProps, ScrollbarRefType, SelectInputButton, SelectInputButtonOptionProps, SelectInputButtonProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, SplitButton, SplitButtonContext, SplitButtonContextType, SplitButtonOptionProps, SplitButtonProps, SplitButtonSizeVariantType, SplitButtonSizeVariants, SplitButtonStyleVariantType, SplitButtonStyleVariants, Stack, StackComponentType, StackContainer, StackContainerComponentType, StackContainerGenericProps, StackContainerOptionProps, StackContainerProps, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledStack, StyledStackContainer, Switch, SwitchOptionProps, SwitchProps, TREE_SYMBOL_KEY, TabOptionProps, TabProps, TabSizeVariantType, TabSizeVariants, TabStyleVariantType, TabStyleVariants, TabStyledProps, TabTextStyledProps, Tabs, TabsContext, TabsContextType, TabsOptionProps, TabsProps, Tag, TagOptionProps, TagProps, TagSizeVariantType, TagSizeVariants, TagStyleVariantType, TagStyleVariants, Text, Text2Rows, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, ToggleButton, ToggleButtonInnerRadioOptionProps, ToggleButtonInnerRadioProps, ToggleButtonOptionProps, ToggleButtonProps, ToggleButtonSizeVariantType, ToggleButtonSizeVariants, Tooltip, TooltipContentProps, TooltipOptionProps, TooltipProps, Tree, TreeItem, TreeItemOptionProps, TreeItemProps, TreeOptionProps, TreeProps, TypographyTokens, WeekClickDateInfo, WeekDatepicker, WeekDatepickerProps, WeekDatepickerStyleType, YearSelectProps, borderRadiusTokens, boxShadowTokens, colorTokens, fontWeightTokens, getDomain, spacingTokens, typographyTokens, useDomain, useDropdownButtonContext, useHandleModal, useModalValue, useSplitButtonContext, useTabs };

package/dist/index.js

@@ -1,11 +1,11 @@
 import * as React3 from 'react';
-import React3__default, { forwardRef, useRef, useState, useCallback, useEffect, createContext, useId, useContext, useMemo, createElement } from 'react';
+import React3__default, { forwardRef, createContext, useRef, useState, useCallback, useEffect, useId, useContext, useMemo, createElement } from 'react';
 import styled6 from '@emotion/styled';
 import { motion, AnimatePresence, LayoutGroup, LazyMotion, domAnimation } from 'framer-motion';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { css } from '@emotion/react';
-import { useMergeRefs, noop, useOutsideClick, OutSideClick, useSelect, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
+import { noop, useMergeRefs, useOutsideClick, OutSideClick, useSelect, useParentElementClick, isNullOrUndefined } from '@shoplflow/utils';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { FloatingPortal, autoUpdate, offset, autoPlacement } from '@floating-ui/react';
 export { arrow, flip, hide, inline, offset, shift, size } from '@floating-ui/react';
@@ -829,6 +829,9 @@ var FooterContainer = styled6.div`
   border-top: 1px solid ${colorTokens.neutral300};
   background: ${colorTokens.neutral0};
 `;
+var BottomContainer = styled6.footer`
+  width: 100%;
+`;
 
 // src/components/Modal/Modal.types.ts
 var ModalSize = {
@@ -855,6 +858,27 @@ var useViewportSizeObserver = () => {
   }, []);
   return size2;
 };
+var ModalOptionContext = createContext({
+  heightToDeduct: 0,
+  setHeightToDeduct: noop,
+  clearHeightToDeduct: noop
+});
+var ModalOptionContextProvider = ({ children }) => {
+  const [heightToDeduct, setHeightToDeduct] = useState(0);
+  const controlHeightToDeduct = useCallback((heightToAdd) => {
+    setHeightToDeduct((prev) => prev + heightToAdd);
+  }, []);
+  const clearHeightToDeduct = useCallback(() => {
+    setHeightToDeduct(0);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    ModalOptionContext.Provider,
+    {
+      value: { heightToDeduct, setHeightToDeduct: controlHeightToDeduct, clearHeightToDeduct },
+      children
+    }
+  );
+};
 var ModalContainer = (_a) => {
   var _b = _a, { children, height, outsideClick = noop } = _b, rest = __objRest(_b, ["children", "height", "outsideClick"]);
   const ref = useParentElementClick(outsideClick);
@@ -889,7 +913,7 @@ var ModalContainer = (_a) => {
       height: heightWidthMargin
     });
   });
-  return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: addPropInChildren }));
+  return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({ ref }, rest), { height: heightWidthMargin, viewport: windowHeight, "data-shoplflow": "Modal", children: /* @__PURE__ */ jsx(ModalOptionContextProvider, { children: addPropInChildren }) }));
 };
 var ModalContainer_default = ModalContainer;
 var ModalFooter = ({ children }) => {
@@ -927,6 +951,13 @@ var ScrollArea = forwardRef((_a, ref) => {
   ) });
 });
 var ScrollArea_default = ScrollArea;
+var useModalOption = () => {
+  const context = useContext(ModalOptionContext);
+  if (!context) {
+    throw new Error(`useModalOption cannot be called outside the ModalOptionProvider`);
+  }
+  return context;
+};
 var ModalBody = ({
   children,
   isIncludeHeader = false,
@@ -935,6 +966,7 @@ var ModalBody = ({
   height: modalContainerHeight
 }) => {
   const { height: windowHeight } = useViewportSizeObserver();
+  const { heightToDeduct } = useModalOption();
   const headerHeight = 64;
   const footerHeight = 72;
   const topBottomMargin = 64;
@@ -956,11 +988,11 @@ var ModalBody = ({
     if (modalContainerHeight) {
       if (modalContainerHeight <= 1200) {
         if (windowHeight < modalContainerHeight) {
-          return windowHeight - topBottomMargin - headerFooterHeight;
+          return windowHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
         }
-        return modalContainerHeight - topBottomMargin - headerFooterHeight;
+        return modalContainerHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
       }
-      return modalContainerHeight - topBottomMargin - headerFooterHeight;
+      return modalContainerHeight - topBottomMargin - headerFooterHeight - heightToDeduct;
     } else {
       return "100%";
     }
@@ -987,32 +1019,23 @@ var ModalBody = ({
     }
     return 0;
   };
-  const setContentHeightMax = () => {
-    let autoHeightMax = setAutoHeightMax();
-    autoHeightMax = autoHeightMax - 24;
-    if (isIncludeHeader) {
-      autoHeightMax = autoHeightMax - 24;
-    }
-    if (!isIncludeHeader) {
-      autoHeightMax = autoHeightMax - 16;
-    }
-    return autoHeightMax;
-  };
+  const autoHeightMin = setAutoHeightMin();
+  const _autoHeightMin = typeof autoHeightMin === "string" ? autoHeightMin : autoHeightMin - heightToDeduct;
   return /* @__PURE__ */ jsx(
     BodyContainer,
     {
       isIncludeHeader,
       sizeVar,
-      minHeight: setAutoHeightMin(),
-      maxHeight: setAutoHeightMax(),
+      minHeight: _autoHeightMin,
+      maxHeight: setAutoHeightMax() - heightToDeduct,
       children: /* @__PURE__ */ jsx(
         ScrollArea_default,
         {
           id: `scrollbar`,
           universal: true,
           autoHeight: !modalContainerHeight,
-          autoHeightMin: setAutoHeightMin(),
-          autoHeightMax: setContentHeightMax(),
+          autoHeightMin: _autoHeightMin,
+          autoHeightMax: "100%",
           style: {},
           children: /* @__PURE__ */ jsx(ModalBodyContainerInner, { children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children }) })
         }
@@ -1026,6 +1049,33 @@ var ModalHeader = ({ children }) => {
 };
 ModalHeader[MODAL_HEADER_KEY] = true;
 var ModalHeader_default = ModalHeader;
+var ModalTop = ({ children }) => {
+  const [topRef, setTopRef] = useState(null);
+  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  useEffect(() => {
+    if (!topRef) {
+      return;
+    }
+    const { height } = topRef.getBoundingClientRect();
+    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
+    return () => clearHeightToDeduct();
+  }, [topRef, setHeightToDeduct, clearHeightToDeduct]);
+  return /* @__PURE__ */ jsx("div", { ref: setTopRef, children });
+};
+var ModalTop_default = ModalTop;
+var ModalBottom = ({ children }) => {
+  const [bottomRef, setBottomRef] = useState(null);
+  const { setHeightToDeduct, clearHeightToDeduct } = useModalOption();
+  useEffect(() => {
+    if (!bottomRef) {
+      return;
+    }
+    const { height } = bottomRef.getBoundingClientRect();
+    setHeightToDeduct == null ? void 0 : setHeightToDeduct(height);
+    return () => clearHeightToDeduct();
+  }, [bottomRef, setHeightToDeduct, clearHeightToDeduct]);
+  return /* @__PURE__ */ jsx(BottomContainer, { ref: setBottomRef, children });
+};
 var ModalHandlerContext = createContext({
   addModal: noop,
   removeModal: noop
@@ -1120,7 +1170,9 @@ var ModalProvider_default = ModalProvider;
 var Modal = {
   Container: ModalContainer_default,
   Header: ModalHeader_default,
+  Top: ModalTop_default,
   Body: ModalBody_default,
+  Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
 var SwitchContainer = styled6.div`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.32.41",
+  "version": "0.32.42",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",