lupine.components 1.1.45 → 1.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/component-pool/floating-icon-menu/floating-icon-menu.tsx

@@ -1,7 +1,20 @@
 import { CssProps, RefProps, bindGlobalStyle, getGlobalStylesId } from 'lupine.web';
 import { IconMenuItemProps } from '../../components/mobile-components/icon-menu-item-props';
 
+export const FloatingIconSize = {
+  SmallSmall: { w: 30, h: 30 },
+  Small: { w: 43, h: 50 },
+  Medium: { w: 56, h: 56 },
+  Large: { w: 69, h: 69 },
+  LargeLarge: { w: 85, h: 85 },
+};
+export type FloatingIconSizeProps = {
+  w: number;
+  h: number;
+};
+
 export interface FloatingIconMenuProps {
+  size?: FloatingIconSizeProps;
   mainIcon: IconMenuItemProps;
   items: IconMenuItemProps[];
   className?: string;
@@ -9,16 +22,20 @@ export interface FloatingIconMenuProps {
   left?: string;
   right?: string;
   bottom?: string;
+  textColor?: string;
+  backgroundColor?: string;
+  zIndex?: string;
   direction?: 'up' | 'down' | 'left' | 'right';
 }
 
 export const FloatingIconMenu = (props: FloatingIconMenuProps) => {
+  const size = props.size || FloatingIconSize.Medium;
   const css: CssProps = {
     position: 'fixed',
     display: 'flex',
     alignItems: 'center',
     gap: '16px',
-    zIndex: '1000',
+    zIndex: props.zIndex || 'var(--layer-header-footer)',
 
     '&.dir-up': { flexDirection: 'column-reverse' },
     '&.dir-up .&-children': { flexDirection: 'column-reverse' },
@@ -33,11 +50,11 @@ export const FloatingIconMenu = (props: FloatingIconMenuProps) => {
     '&.dir-right .&-children': { flexDirection: 'row' },
 
     '.&-main-btn': {
-      width: '56px',
-      height: '56px',
+      width: `${size.w}px`,
+      height: `${size.h}px`,
       borderRadius: '50%',
-      backgroundColor: 'var(--primary-color)',
-      color: 'var(--primary-bg-color)',
+      backgroundColor: props.backgroundColor || 'var(--primary-color)',
+      color: props.textColor || 'var(--primary-bg-color)',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -65,8 +82,8 @@ export const FloatingIconMenu = (props: FloatingIconMenuProps) => {
     },
 
     '.&-child-item': {
-      width: '48px',
-      height: '48px',
+      width: `${size.w - 8}px`,
+      height: `${size.h - 8}px`,
       borderRadius: '50%',
       backgroundColor: 'var(--primary-bg-color)',
       color: 'var(--primary-color)',

package/src/components/mobile-components/mobile-side-menu.tsx

@@ -59,6 +59,7 @@ export class MobileSideMenuHelper {
     let touchstartX = 0;
     let direction = '';
     let moveStart = false;
+    let pendingOpen = false;
     let isOpen = false;
     let menuWidth = 0;
 
@@ -71,6 +72,7 @@ export class MobileSideMenuHelper {
       touchstartX = e.touches[0].clientX;
       direction = '';
       moveStart = false;
+      pendingOpen = false;
       isOpen = maskDom.classList.contains('show');
       
       const menuDom = maskDom.querySelector('.mobile-side-menu') as HTMLDivElement;
@@ -87,35 +89,53 @@ export class MobileSideMenuHelper {
         }
       } else {
         if (touchstartX < 40) {
-          moveStart = true;
-          // Pre-show the mask to allow rendering the menu while dragging
-          maskDom.classList.add('show');
-          if (menuDom) {
-            menuDom.style.transition = 'none'; // Disable transition for 1:1 finger tracking
-            menuDom.style.transform = `translateX(-100%)`; // Start fully hidden left
-          }
+          // Do not start the drawer immediately on touchstart. A tap on a left-edge
+          // header button should still receive its normal click/touchend event.
+          // The drawer gesture is confirmed later in touchmove after a horizontal drag.
+          pendingOpen = true;
         }
       }
     });
 
     document.addEventListener('touchmove', (e) => {
-      if (!moveStart) {
-        return;
-      }
-
       const maskDom = document.querySelector('.mobile-side-menu-mask') as HTMLDivElement;
       if (!maskDom) return;
 
       const currentX = e.touches[0].clientX;
+      const currentY = e.touches[0].clientY;
       const deltaX = currentX - touchstartX;
+      const deltaY = currentY - touchstartY;
 
-      if (direction === '') {
-        if (Math.abs(deltaX) > 0) {
-          direction = 'X';
-        } else {
-          moveStart = false;
+      if (!moveStart) {
+        if (!pendingOpen) {
+          return;
+        }
+
+        // Confirm the side-menu gesture only after the finger clearly drags
+        // right horizontally. Simple taps on left-edge buttons will fall through.
+        if (Math.abs(deltaX) < 8 && Math.abs(deltaY) < 8) {
           return;
         }
+        if (deltaX <= 0 || Math.abs(deltaX) <= Math.abs(deltaY)) {
+          pendingOpen = false;
+          return;
+        }
+
+        moveStart = true;
+        pendingOpen = false;
+        maskDom.classList.add('show');
+
+        const menuDom = maskDom.querySelector('.mobile-side-menu') as HTMLDivElement;
+        if (menuDom) {
+          menuDom.style.transition = 'none'; // Disable transition for 1:1 finger tracking
+          menuDom.style.transform = `translateX(-100%)`; // Start fully hidden left
+        }
+      }
+
+      e.preventDefault();
+
+      if (direction === '') {
+        direction = 'X';
       }
 
       const menuDom = maskDom.querySelector('.mobile-side-menu') as HTMLDivElement;
@@ -144,7 +164,7 @@ export class MobileSideMenuHelper {
           }
         }
       }
-    });
+    }, { passive: false });
 
     document.addEventListener('touchend', (e) => {
       if (!moveStart) return;

package/src/demo/demo-frame-helper.tsx

@@ -29,7 +29,7 @@ import { toggleButtonDemo } from '../components/toggle-button-demo';
 import { messageBoxDemo } from '../components/message-box-demo';
 import { loadingSpinDemo } from '../components/loading-spin-demo';
 import { mobileSideMenuDemo } from '../components/mobile-components/mobile-side-menu-demo';
-import { sliderFrameDemo } from '../components/slider-frame-demo';
+import { sliderFrameDemo } from '../frames/slider-frame-demo';
 import { rangeDemo, gaugeDemo } from '../component-pool/range';
 import { badgeDemo } from '../component-pool/badge';
 import { timelineDemo } from '../component-pool/timeline';

package/src/demo/demo-registry.ts

@@ -27,7 +27,7 @@ import { messageBoxDemo } from '../components/message-box-demo';
 import { loadingSpinDemo } from '../components/loading-spin-demo';
 import { mobileSideMenuDemo } from '../components/mobile-components/mobile-side-menu-demo';
 import { responsiveFrameDemo } from '../frames/responsive-frame-demo';
-import { sliderFrameDemo } from '../components/slider-frame-demo';
+import { sliderFrameDemo } from '../frames/slider-frame-demo';
 import { carouselDemo } from '../component-pool/carousel';
 import { rangeDemo, gaugeDemo } from '../component-pool/range';
 import { cascaderDemo } from '../component-pool/cascader';

package/src/demo/demo-render-page.tsx

@@ -1,4 +1,4 @@
-import { bindGlobalStyle, CssProps, encodeHtml, HtmlVar, isFrontEnd, PageProps } from 'lupine.components';
+import { bindGlobalStyle, CssProps, encodeHtml, HtmlVar, isFrontEnd, MediaQueryMaxWidth, PageProps } from 'lupine.components';
 import { demoRegistry } from './demo-registry';
 import { demoIconsCss } from './mock/demo-icons';
 
@@ -65,12 +65,16 @@ export const DemoRenderPage = async (props: PageProps) => {
     width: '100%',
     height: '100%',
     // Reset any body margins if they exist, though typically handled by global css
-    margin: 0,
+    margin: '0 auto',
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center', // Center components by default
     overflow: 'auto',
+    transform: 'translateX(0)', // Traps position: fixed children inside this container's dimensions
+    maxWidth: MediaQueryMaxWidth.DesktopMax,
+    borderRight: '1px solid var(--primary-border-color)',
+    borderLeft: '1px solid var(--primary-border-color)',
     '>fragment>div': {
       width: '100%',
       height: '100%',
@@ -80,7 +84,8 @@ export const DemoRenderPage = async (props: PageProps) => {
   bindGlobalStyle('demo-icons', demoIconsCss, false, true);
 
   return (
-    <div css={css} class='demo-render-page'>
+    // responsive-frame is for containning slider-frame
+    <div css={css} class='demo-render-page responsive-frame'>
       {dom.node}
     </div>
   );

package/src/demo/mock/demo-icons.ts

@@ -39,6 +39,7 @@ export const demoIcons = {
   'ma-pencil-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E`,
   'ic-play': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='24' height='24'%3E%3Cpath fill='currentColor' d='M20 0 L20 100 L90 50 Z'/%3E%3C/svg%3E`,
   'ic-pause': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='24' height='24'%3E%3Cpath fill='currentColor' d='M0 0 L0 100 L33.33 100 L33.33 0 Z M66.66 0 L66.66 100 L100 100 L100 0 Z'/%3E%3C/svg%3E`,
+  'ma-cog-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z'/%3E%3C/svg%3E`,
 };
 
 export const demoIconsCss: CssProps = {

package/src/demo/mock/side-menu-mock.tsx

@@ -17,11 +17,7 @@ const sideMenuMockCss: CssProps = {
     borderBottom: '1px solid var(--primary-border-color)',
   },
   '.msm-header-icon': {
-    width: '32px',
-    height: '32px',
     marginRight: '12px',
-    borderRadius: '4px',
-    backgroundColor: 'var(--primary-color)',
   },
   '.msm-header-title': {
     fontSize: '18px',
@@ -90,7 +86,7 @@ export const SideMenuMock = ({
   return (
     <div ref={ref} style={{ display: 'flex', flexDirection: 'column', flex: 1, height: '100%' }}>
       <div class='msm-header'>
-        <div class='msm-header-icon'></div>
+        <div class='msm-header-icon'><i class='ifc-icon ma-home-outline'></i></div>
         <div class='msm-header-title'>{title}</div>
       </div>
 

package/src/demo/mock/user-settings-mock.tsx

@@ -153,7 +153,6 @@ const NestedDemoMockContent = () => {
 };
 
 export const NestedDemoMock = (props: { sliderFrameHook: SliderFrameHookProps }) => {
-  props.sliderFrameHook.addClass!('desktop-slide-right');
 
   return (
     <HeaderWithBackFrame
@@ -297,7 +296,6 @@ const UserSettingsMockContent = () => {
 };
 
 export const UserSettingsMock = (props: { sliderFrameHook: SliderFrameHookProps }) => {
-  props.sliderFrameHook.addClass!('desktop-slide-left');
 
   return (
     <HeaderWithBackFrame

package/src/frames/index.ts

@@ -1,3 +1,4 @@
 export * from './responsive-frame';
 export * from './slider-frame';
+export * from './slider-helper';
 export * from './top-frame';

package/src/{components → frames}/slider-frame-demo.tsx

@@ -1,7 +1,8 @@
 import { DemoStory } from '../demo/demo-types';
-import { SliderFrame, SliderFrameHookProps } from '../frames/slider-frame';
-import { HeaderWithBackFrame } from './mobile-components/mobile-header-with-back';
-import { Button, ButtonSize } from './button';
+import { SliderFrame, SliderFrameHookProps } from './slider-frame';
+import { SliderHelper, SliderHelperCloseProps } from './slider-helper';
+import { HeaderWithBackFrame } from '../components/mobile-components/mobile-header-with-back';
+import { Button, ButtonSize } from '../components/button';
 
 // A dummy component to load inside the slider
 const DummyInnerPage = ({ hook }: { hook: SliderFrameHookProps }) => {
@@ -38,13 +39,36 @@ export const sliderFrameDemo: DemoStory<any> = {
         <p style={{ color: '#666', marginBottom: '20px' }}>
           This demo shows how to use SliderFrame to slide in a new full-cover page over the current view.
         </p>
-        <Button
-          text='Open Slider'
-          size={ButtonSize.Medium}
-          onClick={() => {
-            sliderHook.load!(<DummyInnerPage hook={sliderHook} />);
-          }}
-        />
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+          <Button
+            text='Open Slider'
+            size={ButtonSize.Medium}
+            onClick={() => {
+              sliderHook.load!(<DummyInnerPage hook={sliderHook} />);
+            }}
+          />
+          <Button
+            text='Open Slider Helper'
+            size={ButtonSize.Medium}
+            onClick={async () => {
+              let close: SliderHelperCloseProps;
+              close = await SliderHelper.show({
+                direction: args.direction,
+                children: (
+                  <HeaderWithBackFrame title='Slider Helper Inner Page' onBack={() => close()}>
+                    <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+                      <h3>This is the SliderHelper inner page content!</h3>
+                      <p>It uses a static show function and shows a mask on larger screens.</p>
+                      <div>
+                        <Button text='Close SliderHelper via Button' size={ButtonSize.Medium} onClick={() => close()} />
+                      </div>
+                    </div>
+                  </HeaderWithBackFrame>
+                ),
+              });
+            }}
+          />
+        </div>
 
         {/* The SliderFrame is placed here but initially hidden */}
         <SliderFrame hook={sliderHook} direction={args.direction} defaultContent='' />

package/src/frames/slider-frame.tsx

@@ -12,7 +12,8 @@
     </div>
   );
 */
-import { VNode, CssProps, HtmlVar, RefProps, stopPropagation, MediaQueryRange, isFrontEnd } from 'lupine.components';
+import { VNode, stopPropagation } from 'lupine.components';
+import { SliderHelper, SliderHelperCloseProps } from './slider-helper';
 
 // addClass(SliderFramePosition) is used to show two SliderFrames for big screens,
 // so when the second is showing, it needs to set this on the first one
@@ -30,107 +31,39 @@ export type SliderFrameProps = {
   hook?: SliderFrameHookProps;
   afterClose?: () => void | Promise<void>;
 };
+// deprecated
 export const SliderFrame = (props: SliderFrameProps) => {
+  let closeSlider: SliderHelperCloseProps | undefined;
+  let opened = false;
+  let className = '';
+
   if (props.hook) {
     props.hook.load = (children) => {
-      dom.value = children;
-      ref.current?.classList.remove('d-none');
-      setTimeout(() => {
-        ref.current?.classList.add('show');
-      }, 100);
+      opened = true;
+      SliderHelper.show({
+        direction: props.direction || 'right',
+        children,
+        className,
+        closeEvent: () => {
+          opened = false;
+          closeSlider = undefined;
+          props.afterClose?.();
+        },
+      }).then((close) => {
+        closeSlider = close;
+      });
     };
     props.hook.close = (event: Event) => {
       stopPropagation(event);
-      ref.current?.classList.remove('show');
-      setTimeout(async () => {
-        ref.current?.classList.add('d-none');
-        dom.value = '';
-        if (props.afterClose) {
-          await props.afterClose();
-        }
-      }, 400);
+      closeSlider?.();
     };
-    props.hook.addClass = (className) => {
-      ref.current?.classList.add(className);
+    // deprecated
+    props.hook.addClass = (newClassName) => {
+      className = [className, newClassName].join(' ').trim();
     };
     props.hook.isOpened = () => {
-      return ref.current?.classList.contains('show');
+      return opened;
     };
   }
-  const dom = new HtmlVar(<div class='slider-frame-default'>{props.defaultContent || '(No Content)'}</div>);
-  const ref: RefProps = {
-    onLoad: async (el: Element) => {
-      // Keep fixed sliders out of padded/top-frame layout containers on iOS.
-      // iOS WebView can treat fixed children inside safe-area padded app frames inconsistently;
-      // mounting the slider at body level also makes z-index compare globally.
-      if (isFrontEnd()) {
-        const root = (window.parent as any).document.querySelector('.lupine-root') as HTMLElement;
-        if (root && el.parentElement !== root) {
-          root.appendChild(el);
-        }
-      }
-    },
-  };
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'fixed',
-    top: '0',
-    left: 'var(--auto-sidemenu-left-offset, 0px)',
-    right: '0',
-    bottom: '0',
-    zIndex: 'var(--layer-slider)',
-    transform: props.direction === 'bottom' ? 'translateY(100%)' : 'translateX(100%)',
-    transition: 'transform 0.4s ease-in-out',
-    backgroundColor: 'var(--primary-bg-color)',
-    // trick: to put two padding-top properties
-    'padding-top ': 'constant(safe-area-inset-top)',
-    'padding-top': 'env(safe-area-inset-top)',
-    '&.show': {
-      transform: props.direction === 'bottom' ? 'translateY(0)' : 'translateX(0)',
-    },
-    '& > *': {
-      '--auto-sidemenu-left-offset': '0px',
-    },
-    '& > fragment': {
-      height: '100%',
-      '--auto-sidemenu-left-offset': '0px',
-    },
-    '&.desktop-slide-left': {
-      [MediaQueryRange.TabletAbove]: {
-        '.header-back-content': {
-          width: '30%',
-        },
-      },
-    },
-    '&.desktop-slide-right': {
-      [MediaQueryRange.TabletAbove]: {
-        top: '59px', // Just below DesktopHeader
-        left: 'calc(max(var(--auto-sidemenu-left-offset, 0px), 30%))',
-        transform: 'translateX(0)',
-        // notice: here is connected with mobile-header-title-icon.tsx
-        '.mobile-header-title-icon-top': {
-          width: '100%',
-          boxShadow: 'unset',
-        },
-        '.header-back-content': {
-          width: '100%',
-        },
-        '.mhti-title': {
-          fontSize: '15px',
-        },
-        '.mhti-left, .mhti-right': {
-          display: 'none',
-        },
-        '&.d-none': {
-          display: 'unset !important',
-        },
-      },
-    },
-  };
-  return (
-    <div ref={ref} css={css} class='slider-frame d-none'>
-      {dom.node}
-    </div>
-  );
+  return <></>;
 };

package/src/frames/slider-helper.tsx

@@ -0,0 +1,192 @@
+import { CssProps, RefProps, VNode, mountInnerComponent } from 'lupine.web';
+import { backActionHelper, stopPropagation } from '../lib';
+import { MediaQueryMaxWidth, MediaQueryRange } from '../styles';
+
+export type SliderHelperDirection = 'right' | 'left' | 'bottom' | 'top';
+export type SliderHelperCloseProps = () => void;
+
+export type SliderHelperShowProps = {
+  children: VNode<any>;
+  direction?: SliderHelperDirection;
+  closeEvent?: () => void;
+  closeWhenClickOutside?: boolean;
+  zIndex?: string;
+  maxWidth?: string;
+  className?: string;
+  contentClassName?: string;
+  mountTarget?: HTMLElement;
+};
+
+export class SliderHelper {
+  static async show({
+    children,
+    direction = 'right',
+    closeEvent,
+    closeWhenClickOutside = true,
+    zIndex,
+    maxWidth = MediaQueryMaxWidth.MobileMax,
+    className = '',
+    contentClassName = '',
+    mountTarget,
+  }: SliderHelperShowProps): Promise<SliderHelperCloseProps> {
+    const base = document.createElement('div');
+    const isHorizontal = direction === 'left' || direction === 'right';
+    const isFromEnd = direction === 'right' || direction === 'bottom';
+    const closeClassName = isFromEnd ? 'close-to-end' : 'close-to-start';
+
+    let closed = false;
+    const handleClose = () => {
+      if (closed) return;
+      closed = true;
+      closeEvent?.();
+      ref.current?.classList.remove('show');
+      ref.current?.classList.add(closeClassName);
+      setTimeout(() => {
+        base.remove();
+      }, 400);
+    };
+
+    const onClickContainer = (event: MouseEvent) => {
+      if (closeWhenClickOutside !== false && event.target === ref.current) {
+        handleClose();
+      }
+    };
+
+    const onClickContent = (event: MouseEvent) => {
+      stopPropagation(event);
+    };
+
+    const ref: RefProps = {
+      onLoad: async () => {
+        // Make sure the browser has painted the initial transform state before adding show,
+        // otherwise rapid close/open can skip the transition and display directly.
+        ref.current?.classList.remove('show', 'close-to-end', 'close-to-start');
+        ref.current?.getBoundingClientRect();
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            ref.current?.classList.add('show');
+          });
+        });
+      },
+    };
+
+    const startTransform = isHorizontal
+      ? direction === 'right'
+        ? 'translateX(100%)'
+        : 'translateX(-100%)'
+      : direction === 'bottom'
+        ? 'translateY(100%)'
+        : 'translateY(-100%)';
+    const showTransform = 'translate(0, 0)';
+    const endTransform = isHorizontal
+      ? direction === 'right'
+        ? 'translateX(100%)'
+        : 'translateX(-100%)'
+      : direction === 'bottom'
+        ? 'translateY(100%)'
+        : 'translateY(-100%)';
+    const oppositeTransform = isHorizontal
+      ? direction === 'right'
+        ? 'translateX(-100%)'
+        : 'translateX(100%)'
+      : direction === 'bottom'
+        ? 'translateY(-100%)'
+        : 'translateY(100%)';
+
+    const contentCss: CssProps = isHorizontal
+      ? {
+          top: '0',
+          bottom: '0',
+          width: '100%',
+          maxWidth,
+          [direction]: '0',
+        }
+      : {
+          top: direction === 'top' ? '0' : 'auto',
+          bottom: direction === 'bottom' ? '0' : 'auto',
+          left: 'auto',
+          right: '0',
+          width: '100%',
+          maxWidth,
+          height: '100%',
+        };
+
+    const cssContainer: CssProps = {
+      display: 'flex',
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      right: '0',
+      bottom: '0',
+      zIndex: zIndex || 'var(--layer-slider)',
+      overflow: 'hidden',
+      backgroundColor: '#00000000',
+      transition: 'background-color 0.4s ease-in-out',
+      pointerEvents: 'auto',
+      '&.show': {
+        [MediaQueryRange.MobileAbove]: {
+          backgroundColor: 'var(--cover-mask-bg-color)',
+        },
+        '.slider-helper-content': {
+          transform: showTransform,
+        },
+      },
+      '&.close-to-end': {
+        '.slider-helper-content': {
+          transform: endTransform,
+        },
+      },
+      '&.close-to-start': {
+        '.slider-helper-content': {
+          transform: oppositeTransform,
+        },
+      },
+      '.slider-helper-content': {
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'fixed',
+        boxSizing: 'border-box',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+        scrollbarWidth: 'none',
+        color: 'var(--primary-color)',
+        backgroundColor: 'var(--primary-bg-color)',
+        boxShadow: 'var(--cover-box-shadow)',
+        transform: startTransform,
+        transition: 'transform 0.4s ease-in-out',
+        // trick: to put two padding-top properties
+        'padding-top ': 'constant(safe-area-inset-top)',
+        'padding-top': 'env(safe-area-inset-top)',
+        ...contentCss,
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+      },
+    };
+
+    const component = (
+      <div
+        css={cssContainer}
+        ref={ref}
+        class={['slider-helper-box', `from-${direction}`, className].join(' ').trim()}
+        onClick={onClickContainer}
+      >
+        <div
+          class={['slider-helper-content', contentClassName].join(' ').trim()}
+          onClick={onClickContent}
+          data-back-action={backActionHelper.genBackActionId()}
+        >
+          {children}
+        </div>
+      </div>
+    );
+
+    base.style.position = 'fixed';
+    base.style.inset = '0';
+    base.style.zIndex = zIndex || 'var(--layer-slider)';
+    const host = mountTarget || document.querySelector('.responsive-frame') || document.querySelector('.lupine-root') || document.body;
+    host.appendChild(base);
+    await mountInnerComponent(base, component);
+    return handleClose;
+  }
+}