lupine.components 1.1.34 → 1.1.36

package/package.json

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

package/src/components/float-window.tsx

@@ -1,5 +1,5 @@
 import { CssProps, RefProps, VNode, mountInnerComponent } from 'lupine.web';
-import { stopPropagation } from '../lib';
+import { stopPropagation, backActionHelper } from '../lib';
 
 export type FloatWindowCloseProps = () => void;
 
@@ -163,7 +163,7 @@ export class FloatWindow {
         <div ref={ref} class='fwin-body' onMouseDown={onMousedown}>
           <div class='fwin-title'>
             {title}
-            <span class='fwin-close' onClick={handleClose}>
+            <span class='fwin-close' onClick={handleClose} data-back-action={backActionHelper.genBackActionId()}>
               ×
             </span>
           </div>

package/src/components/menu-sidebar.tsx

@@ -1,5 +1,5 @@
 import { bindGlobalStyle, CssProps, getRenderPageProps, RefProps } from 'lupine.web';
-import { stopPropagation } from '../lib';
+import { stopPropagation, backActionHelper } from '../lib';
 import { MediaQueryMaxWidth } from '../styles';
 import { NestMenuItemProps } from './menu-item-props';
 
@@ -277,7 +277,13 @@ export const MenuSidebar = ({
     menu.classList.toggle('active');
     const topMenu = ref.$('.menu-sidebar-top');
     topMenu.classList.toggle('open');
-    ref.current.classList.toggle('open');
+    const isOpen = ref.current.classList.toggle('open');
+    
+    if (isOpen) {
+      ref.current.setAttribute('data-back-action', backActionHelper.genBackActionId());
+    } else {
+      ref.current.removeAttribute('data-back-action');
+    }
   };
   const onItemToggleClick = (ref: RefProps) => {
     // if (event.target != ref.current && (event.target as any).parentNode != ref.current) {

package/src/components/mobile-components/mobile-header-title-icon.tsx

@@ -16,7 +16,13 @@ export const MobileHeadeBackIcon = ({ onClick }: { onClick: (event: Event) => vo
 };
 
 export const MobileHeadeCloseIcon = ({ onClick }: { onClick: (event: Event) => void }) => {
-  return <i class='ifc-icon ma-close mhti-close-icon' onClick={(event) => onClick(event)}></i>;
+  return (
+    <i
+      class='ifc-icon ma-close mhti-close-icon'
+      data-back-action={backActionHelper.genBackActionId()}
+      onClick={(event) => onClick(event)}
+    ></i>
+  );
 };
 
 export const MobileHeaderEmptyIcon = () => {

package/src/components/mobile-components/mobile-header-with-back.tsx

@@ -17,7 +17,13 @@ export const HeaderWithBackFrameLeft = ({ onClick }: { onClick: (event: Event) =
 };
 
 export const HeaderWithBackFrameRight = ({ onClick }: { onClick: (event: Event) => void }) => {
-  return <i class='ifc-icon ma-close header-back-right-icon' onClick={(event) => onClick(event)}></i>;
+  return (
+    <i
+      class='ifc-icon ma-close header-back-right-icon'
+      data-back-action={backActionHelper.genBackActionId()}
+      onClick={(event) => onClick(event)}
+    ></i>
+  );
 };
 
 export const HeaderWithBackFrameEmpty = () => {

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

@@ -223,8 +223,10 @@ export const MobileSideMenu = (props: { children: VNode<any>; autoExtend?: boole
       overflowY: 'auto',
       transform: 'translateX(-100%)',
       boxShadow: 'var(--cover-box-shadow)',
-      'padding-top ': 'constant(safe-area-inset-top)',
-      'padding-top': 'env(safe-area-inset-top)',
+      '@supports (-webkit-touch-callout: none)': {
+        'padding-top ': 'constant(safe-area-inset-top)',
+        'padding-top': 'env(safe-area-inset-top)',
+      },
     },
     [MediaQueryRange.TabletAbove]: {
       '&.auto-extend .mobile-side-menu-mask': {

package/src/frames/responsive-frame.tsx

@@ -35,8 +35,10 @@ export const ResponsiveFrame = (props: ResponsiveFrameProps) => {
     borderLeft: props.maxWidth ? '1px solid var(--primary-border-color)' : 'none',
     margin: '0 auto',
     overflowX: 'hidden',
-    'padding-top ': 'constant(safe-area-inset-top)',
-    'padding-top': 'env(safe-area-inset-top)',
+    '@supports (-webkit-touch-callout: none)': {
+      'padding-top ': 'constant(safe-area-inset-top)',
+      'padding-top': 'env(safe-area-inset-top)',
+    },
     '.frame-top-menu': {
       display: 'flex',
       flexDirection: 'column',

package/src/frames/slider-frame.tsx

@@ -72,8 +72,10 @@ export const SliderFrame = (props: SliderFrameProps) => {
     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)',
+    '@supports (-webkit-touch-callout: none)': {
+      'padding-top ': 'constant(safe-area-inset-top)',
+      'padding-top': 'env(safe-area-inset-top)',
+    },
     '&.show': {
       transform: props.direction === 'bottom' ? 'translateY(0)' : 'translateX(0)',
     },

package/src/frames/top-frame.tsx

@@ -16,9 +16,11 @@ export const TopFrame = async (placeholderClassname: string, vnode: VNode<any>)
       flexDirection: 'column',
       height: '100%',
       // trick: to put two padding-top properties
+    '@supports (-webkit-touch-callout: none)': {
       'padding-top ': 'constant(safe-area-inset-top)',
       'padding-top': 'env(safe-area-inset-top)',
     },
+    },
   };
 
   return (