amotify 0.0.59 → 0.0.60

package/src/functions/Sheet/parts.tsx

@@ -3,25 +3,25 @@ import {
   React,
   LaunchSubApplication,
   useStore,
-} from '@global';
+} from '@global'
 import {
   Img,
   Box,
   Flex,
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Column,
   Row,
   Text
-} from '@mols';
+} from '@mols'
 import {
   Buttons,
   Input,
   Layout
-} from '@fn';
+} from '@fn'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 type Params = amotify.fn.Sheet.Params & {
   type: amotify.fn.Sheet.SheetTypes
@@ -54,9 +54,9 @@ const Comps = {
 
     if ( this.contents[ params.sheetID! ] ) {
       /** open Exist Sheet */
-      let component = useStore.get( params.sheetID! );
-      if ( component && component.refresh ) component.refresh( params,true );
-      return;
+      let component = useStore.get( params.sheetID! )
+      if ( component && component.refresh ) component.refresh( params,true )
+      return
     }
     /** create Sheet */
     let Content = <Comps.Core { ...params } />
@@ -75,25 +75,25 @@ const Comps = {
           isRoot: false,
           baseElement: '#Sheet-' + params.sheetID,
           reactElement: Content,
-        } );
-      } );
+        } )
+      } )
   },
   mainSheetScrolls: 0,
   subSheetLength: 0,
   currentIndex: 0,
   Core: ( params: Params ) => {
-    let [ val_componentID ] = React.useState( $.uuidGen() );
-    let [ val_params,set_params ] = React.useState( params );
-    let [ val_open,set_open ] = React.useState( true );
+    let [ val_componentID ] = React.useState( $.uuidGen() )
+    let [ val_params,set_params ] = React.useState( params )
+    let [ val_open,set_open ] = React.useState( true )
 
     let {
       type,
       sheetID,
       openAfter,
       closeAfter,
-    } = val_params;
+    } = val_params
 
-    let isNewSheet = !params.overwrap;
+    let isNewSheet = !params.overwrap
 
     let ContentFC: any = Comps.Types[ {
       'normal.topLeft': 'Normal',
@@ -112,20 +112,20 @@ const Comps = {
       'drawer.bottom': 'Bottom',
 
       'custom': 'Custom',
-    }[ type ] as 'Normal' ];
+    }[ type ] as 'Normal' ]
 
     React.useEffect( () => {
       useStore.set( {
         key: sheetID!,
         value: {
           refresh: ( params: Params,open?: boolean ) => {
-            set_params( params );
-            set_open( open ?? false );
+            set_params( params )
+            set_open( open ?? false )
           },
           resize: ( size: string ) => {
             if ( type == 'drawer.bottom' ) {
-              let component = useStore.get( val_componentID );
-              if ( component && component.resize ) component.resize( size );
+              let component = useStore.get( val_componentID )
+              if ( component && component.resize ) component.resize( size )
             } else if (
               val_params.type.includes( 'normal' ) ||
               val_params.type.includes( 'drawer' )
@@ -133,87 +133,87 @@ const Comps = {
               set_params( {
                 ...val_params,
                 size: size
-              } as any );
+              } as any )
             }
           },
           close: ( force: boolean ) => {
-            Comps.contents[ sheetID! ].open = false;
+            Comps.contents[ sheetID! ].open = false
 
-            set_open( false );
+            set_open( false )
           },
           open: () => {
-            Comps.contents[ sheetID! ].open = true;
+            Comps.contents[ sheetID! ].open = true
 
-            set_open( true );
+            set_open( true )
           }
         }
-      } );
-    } );
+      } )
+    } )
     React.useEffect( () => {
-      Comps.currentIndex++;
+      Comps.currentIndex++
 
       let {
         close_option
-      } = params;
+      } = params
 
       $.fnScope( () => {
-        if ( !close_option?.elementBlur ) return;
-        let element = $( close_option.elementBlur );
-        if ( !element[ 0 ] ) return;
+        if ( !close_option?.elementBlur ) return
+        let element = $( close_option.elementBlur )
+        if ( !element[ 0 ] ) return
         $( element ).addEvent( {
           eventID: 'SheetClosation-' + sheetID!,
           eventType: 'mouseout',
           callback: () => {
-            Sheet.close( sheetID! );
+            Sheet.close( sheetID! )
 
-            $().removeEvent( 'SheetClosation-' + sheetID! );
+            $().removeEvent( 'SheetClosation-' + sheetID! )
           }
-        } );
-      } );
-    },[] );
+        } )
+      } )
+    },[] )
     React.useEffect( () => {
       $.fnScope( () => {
-        if ( !isNewSheet ) return;
-        if ( !params.backgroundEffect ) return;
+        if ( !isNewSheet ) return
+        if ( !params.backgroundEffect ) return
 
-        Comps.subSheetLength = Comps.subSheetLength + ( val_open ? 1 : -1 );
+        Comps.subSheetLength = Comps.subSheetLength + ( val_open ? 1 : -1 )
         if ( val_open ) {
-          let html = $( 'html' );
+          let html = $( 'html' )
 
           if ( Comps.subSheetLength == 1 ) {
-            let scroll = html[ 0 ].scrollTop;
-            Comps.mainSheetScrolls = scroll;
+            let scroll = html[ 0 ].scrollTop
+            Comps.mainSheetScrolls = scroll
           }
-          if ( !amotify.config.device.isBreakpoint() ) {
+          if ( !amotify.config.device.isPhone ) {
             html
               .abort()
               .addClass( style.FixHeight )
               .callback( () => {
                 $( '#' + launchID + ' .AMOTIFY_be_root' )
                   .addClass( style.FixScroll )
-                [ 0 ].scrollTop = Comps.mainSheetScrolls;
+                [ 0 ].scrollTop = Comps.mainSheetScrolls
               } )
               .addClass( [
                 style.FloatMainSheet,
                 style[ 'Type_' + type ]
               ] )
-            [ 0 ].scrollTop = 0;
+            [ 0 ].scrollTop = 0
           }
         } else {
-          if ( Comps.subSheetLength != 0 ) return;
-          if ( amotify.config.device.isBreakpoint() ) return;
-          let html = $( 'html' );
+          if ( Comps.subSheetLength != 0 ) return
+          if ( amotify.config.device.isPhone ) return
+          let html = $( 'html' )
           html
             .abort()
             .removeClass( style.FloatMainSheet )
             .await( 251 )
             .removeClass( style.FixHeight )
             .callback( ( html ) => {
-              html[ 0 ].scrollTop = Comps.mainSheetScrolls | 0;
-              $( '#' + launchID + ' .AMOTIFY_be_root' )[ 0 ].scrollTop = 0;
-            } );
+              html[ 0 ].scrollTop = Comps.mainSheetScrolls | 0
+              $( '#' + launchID + ' .AMOTIFY_be_root' )[ 0 ].scrollTop = 0
+            } )
         }
-      } );
+      } )
       $.fnScope( () => {
         if ( val_open ) {
           $( '#' + val_componentID )
@@ -223,7 +223,7 @@ const Comps = {
             .await( 10 )
             .addClass( style.Open )
             .callback( () => {
-              if ( openAfter ) openAfter();
+              if ( openAfter ) openAfter()
             } )
         } else {
           $( '#' + val_componentID )
@@ -233,20 +233,20 @@ const Comps = {
             .await( 251 )
             .addClass( style.Hide )
             .callback( () => {
-              !closeAfter || closeAfter();
+              !closeAfter || closeAfter()
 
               if ( params.hold_state ) {
-                return;
+                return
               }
-              delete Comps.contents[ sheetID! ];
-              $( '#Sheet-' + sheetID ).remove();
-              $().removeEvent( 'SheetClosation-' + sheetID! );
-            } );
+              delete Comps.contents[ sheetID! ]
+              $( '#Sheet-' + sheetID ).remove()
+              $().removeEvent( 'SheetClosation-' + sheetID! )
+            } )
         }
-      } );
-    },[ val_open ] );
+      } )
+    },[ val_open ] )
 
-    let [ Tcate,Tpos ] = type.split( '.' );
+    let [ Tcate,Tpos ] = type.split( '.' )
 
     return <Box
       className={ [
@@ -279,7 +279,7 @@ const Comps = {
           { ...val_params }
         />
       </Column>
-    </Box>;
+    </Box>
   },
   Types: {
     Normal: ( params: amotify.fn.Sheet.NormalParams ) => {
@@ -295,40 +295,40 @@ const Comps = {
         hold_state,
         overwrap,
         ...styles
-      } = params;
-      let [ Tcate,Tpos ] = type.split( '.' );
+      } = params
+      let [ Tcate,Tpos ] = type.split( '.' )
 
       let SysStyles: amotifyUniStyleParams = {}
-      let transformOrigins: string[] = [];
+      let transformOrigins: string[] = []
 
       if ( Tpos.match( /top/ ) ) {
-        transformOrigins.push( 'top' );
+        transformOrigins.push( 'top' )
 
-        SysStyles.marginBottom = 'auto';
+        SysStyles.marginBottom = 'auto'
       } else if ( Tpos.match( /middle/ ) ) {
-        transformOrigins.push( 'center' );
+        transformOrigins.push( 'center' )
 
-        SysStyles.marginTop = 'auto';
-        SysStyles.marginBottom = 'auto';
+        SysStyles.marginTop = 'auto'
+        SysStyles.marginBottom = 'auto'
       } else if ( Tpos.match( /bottom/ ) ) {
-        transformOrigins.push( 'bottom' );
+        transformOrigins.push( 'bottom' )
 
-        SysStyles.marginTop = 'auto';
+        SysStyles.marginTop = 'auto'
       }
 
       if ( Tpos.match( /left/i ) ) {
-        transformOrigins.push( 'left' );
+        transformOrigins.push( 'left' )
 
-        SysStyles.marginRight = 'auto';
+        SysStyles.marginRight = 'auto'
       } else if ( Tpos.match( /center/i ) ) {
-        transformOrigins.push( 'center' );
+        transformOrigins.push( 'center' )
 
-        SysStyles.marginLeft = 'auto';
-        SysStyles.marginRight = 'auto';
+        SysStyles.marginLeft = 'auto'
+        SysStyles.marginRight = 'auto'
       } else if ( Tpos.match( /right/i ) ) {
-        transformOrigins.push( 'right' );
+        transformOrigins.push( 'right' )
 
-        SysStyles.marginLeft = 'auto';
+        SysStyles.marginLeft = 'auto'
       }
 
       return <Box
@@ -355,7 +355,7 @@ const Comps = {
           ...freeCSS
         } }
         children={ $.is.function( Content ) ? <Content /> : Content }
-      />;
+      />
     },
     Edge: ( params: amotify.fn.Sheet.NormalParams ) => {
       let {
@@ -370,7 +370,7 @@ const Comps = {
         hold_state,
         overwrap,
         ...styles
-      } = params;
+      } = params
 
       return <Box
         opacity='trans'
@@ -402,7 +402,7 @@ const Comps = {
           ...freeCSS
         } }
         children={ $.is.function( Content ) ? <Content /> : Content }
-      />;
+      />
     },
     Bottom: ( params: amotify.fn.Sheet.Bottom.Params ) => {
       let {
@@ -419,10 +419,10 @@ const Comps = {
         hold_state,
         overwrap,
         ...styles
-      } = params;
-      let screen = $.getScreenSize();
+      } = params
+      let screen = $.getScreenSize()
 
-      let sizeArray = [ 0,.2,.6,.95 ];
+      let sizeArray = [ 0,.2,.6,.95 ]
       let SizeSets = {
         'ZERO': 0,
         'S': 1,
@@ -430,7 +430,7 @@ const Comps = {
         'L': 3
       }
 
-      let [ val_stableSize,set_stableSize ] = React.useState( size as any );
+      let [ val_stableSize,set_stableSize ] = React.useState( size as any )
       let [ val_edit,set_edit ] = React.useState( {
         process: false,
         processStart: 0,
@@ -438,22 +438,22 @@ const Comps = {
         originValue: 0,
         viewHeight: 0,
         value: sizeArray[ SizeSets[ size ] ]
-      } );
+      } )
 
       useStore.update( {
         key: componentID!,
         value: {
           val_edit,
           resize: ( size: amotify.fn.Sheet.Bottom.Sizes ) => {
-            let Size = sizeArray[ SizeSets[ size ] ];
+            let Size = sizeArray[ SizeSets[ size ] ]
             set_edit( {
               ...val_edit,
               value: Size
-            } );
-            set_stableSize( size );
+            } )
+            set_stableSize( size )
           }
         }
-      } );
+      } )
 
       const Effects = {
         Start: ( event: any ) => {
@@ -461,9 +461,9 @@ const Comps = {
             .addEvent( { eventID: 'BottomSheetMouseMove',eventType: 'mousemove',callback: Effects.Move } )
             .addEvent( { eventID: 'BottomSheetTouchMove',eventType: 'touchmove',callback: Effects.Move } )
             .addEvent( { eventID: 'BottomSheetMouseUp',eventType: 'mouseup',callback: Effects.End } )
-            .addEvent( { eventID: 'BottomSheetTouchEnd',eventType: 'touchend',callback: Effects.End } );
+            .addEvent( { eventID: 'BottomSheetTouchEnd',eventType: 'touchend',callback: Effects.End } )
 
-          let cursor = $.getCursor( event );
+          let cursor = $.getCursor( event )
           let newEditInfo = {
             ...val_edit,
             process: true,
@@ -477,87 +477,87 @@ const Comps = {
             value: {
               val_edit: newEditInfo
             }
-          } );
-          set_edit( newEditInfo );
+          } )
+          set_edit( newEditInfo )
         },
         Move: ( event: any ) => {
-          let editInfo = useStore.get( componentID! )?.val_edit as typeof val_edit;
-          if ( !editInfo.process ) return;
+          let editInfo = useStore.get( componentID! )?.val_edit as typeof val_edit
+          if ( !editInfo.process ) return
 
-          let margin = $.getCursor( event ).y - editInfo.originY;
-          let marginRate = margin / editInfo.viewHeight;
-          let newRate = editInfo.originValue - marginRate;
+          let margin = $.getCursor( event ).y - editInfo.originY
+          let marginRate = margin / editInfo.viewHeight
+          let newRate = editInfo.originValue - marginRate
 
           if ( newRate > .95 ) {
-            let margin = newRate - .95;
-            newRate = .95 + margin * .5;
+            let margin = newRate - .95
+            newRate = .95 + margin * .5
           } else if ( newRate < .2 ) {
-            let margin = .2 - newRate;
-            margin -= .1;
-            newRate = .1 + ( .1 - margin ) * .5;
+            let margin = .2 - newRate
+            margin -= .1
+            newRate = .1 + ( .1 - margin ) * .5
           }
 
           set_edit( {
             ...editInfo,
             value: newRate
-          } );
+          } )
         },
         End: ( event: any ) => {
-          let editInfo = useStore.get( componentID! )?.val_edit as typeof val_edit;
-          if ( !editInfo.process ) return;
+          let editInfo = useStore.get( componentID! )?.val_edit as typeof val_edit
+          if ( !editInfo.process ) return
           $( document ).removeEvent( [
             'BottomSheetMouseMove',
             'BottomSheetTouchMove',
             'BottomSheetMouseUp',
             'BottomSheetTouchEnd'
-          ] );
+          ] )
 
-          let sizeIndex = 0;
+          let sizeIndex = 0
           if ( editInfo.value < .1 ) {
           } else if ( editInfo.value < .5 ) {
-            sizeIndex = 1;
+            sizeIndex = 1
           } else if ( editInfo.value > .75 ) {
-            sizeIndex = 3;
+            sizeIndex = 3
           } else {
-            sizeIndex = 2;
+            sizeIndex = 2
           }
 
-          let ms = new Date().getTime() - editInfo.processStart;
+          let ms = new Date().getTime() - editInfo.processStart
           if ( ms < 300 ) {
-            let margin = $.getCursor( event ).y - editInfo.originY;
+            let margin = $.getCursor( event ).y - editInfo.originY
             if ( Math.abs( margin ) >= 20 ) {
-              let dir = Number( margin < 0 ) * 2 - 1;
-              sizeIndex += dir;
-              sizeIndex = Math.min( Math.max( sizeIndex,0 ),sizeArray.length - 1 );
+              let dir = Number( margin < 0 ) * 2 - 1
+              sizeIndex += dir
+              sizeIndex = Math.min( Math.max( sizeIndex,0 ),sizeArray.length - 1 )
             }
           }
 
           if ( sizeIndex == 0 ) {
-            if ( !swipeDown ) sizeIndex = 1;
+            if ( !swipeDown ) sizeIndex = 1
           }
-          set_stableSize( [ 'ZERO','S','R','L' ][ sizeIndex ] as any );
+          set_stableSize( [ 'ZERO','S','R','L' ][ sizeIndex ] as any )
           set_edit( {
             ...editInfo,
             value: sizeArray[ sizeIndex ],
             process: false
-          } );
+          } )
         }
       }
 
-      const mounted = React.useRef( false );
+      const mounted = React.useRef( false )
       React.useEffect( () => {
         if ( mounted.current ) {
           if ( val_stableSize == 'ZERO' ) {
-            if ( swipeDown ) Sheet.close( sheetID! );
+            if ( swipeDown ) Sheet.close( sheetID! )
           } else {
             setTimeout( () => {
-              if ( params.sizeChanged ) params.sizeChanged( val_stableSize );
-            },250 );
+              if ( params.sizeChanged ) params.sizeChanged( val_stableSize )
+            },250 )
           }
         } else {
-          mounted.current = true;
+          mounted.current = true
         }
-      },[ val_stableSize ] );
+      },[ val_stableSize ] )
 
       return <Box
         className={ style.BB }
@@ -620,7 +620,7 @@ const Comps = {
               color='cloud'
               ssSphere={ 2 }
               onClick={ () => {
-                Sheet.close( sheetID! );
+                Sheet.close( sheetID! )
               } }
             >
               <FAI.Times />
@@ -635,7 +635,7 @@ const Comps = {
             { $.is.function( Content ) ? <Content /> : Content }
           </Box>
         </Column>
-      </Box>;
+      </Box>
     },
     Custom: ( params: amotify.fn.Sheet.CustomParams ) => {
       let {
@@ -650,60 +650,60 @@ const Comps = {
         openAfter,
         closeAfter,
         ...others
-      } = params;
+      } = params
 
-      let [ val_componentID ] = React.useState( $.uuidGen() );
-      let Parent = $( parent );
-      let Query = '[data-sheet-id="' + val_componentID + '"]';
-      let ContentQuery = '[data-sheet-content="' + val_componentID + '"]';
+      let [ val_componentID ] = React.useState( $.uuidGen() )
+      let Parent = $( parent )
+      let Query = '[data-sheet-id="' + val_componentID + '"]'
+      let ContentQuery = '[data-sheet-content="' + val_componentID + '"]'
 
-      GPT = GPT!;
-      let column = GPT % 5 || 5;
-      let row = Math.ceil( GPT / 5 );
+      GPT = GPT!
+      let column = GPT % 5 || 5
+      let row = Math.ceil( GPT / 5 )
 
       const getWrapperCSS = () => {
         let WrapperCSS: React.CSSProperties = {}
-        let { top,right,bottom,left,height,width } = Parent.position();
+        let { top,right,bottom,left,height,width } = Parent.position()
 
         if ( [ 1,2 ].includes( column ) ) {
-          WrapperCSS.left = left;
+          WrapperCSS.left = left
         } else if ( column == 3 ) {
-          WrapperCSS.left = left + width / 2;
+          WrapperCSS.left = left + width / 2
         } else if ( [ 4,5 ].includes( column ) ) {
-          WrapperCSS.left = right;
+          WrapperCSS.left = right
         }
 
         if ( GPT <= 10 ) {
-          WrapperCSS.top = top;
+          WrapperCSS.top = top
         } else if ( GPT <= 15 ) {
-          WrapperCSS.top = top + height / 2;
+          WrapperCSS.top = top + height / 2
         } else if ( GPT <= 25 ) {
-          WrapperCSS.top = bottom;
+          WrapperCSS.top = bottom
         }
-        return WrapperCSS;
+        return WrapperCSS
       }
 
-      let [ val_Styles,set_Styles ] = React.useState( getWrapperCSS() );
+      let [ val_Styles,set_Styles ] = React.useState( getWrapperCSS() )
       const AdjustExtrusion = () => {
-        let BaseRect = $( Query ).position();
-        let ContentRect = $( ContentQuery ).position();
-        let screen = $.getScreenSize();
+        let BaseRect = $( Query ).position()
+        let ContentRect = $( ContentQuery ).position()
+        let screen = $.getScreenSize()
 
         let newStyles = { ...val_Styles }
         if ( ContentRect.top < 0 ) {
-          newStyles.top = BaseRect.top - ContentRect.top;
+          newStyles.top = BaseRect.top - ContentRect.top
         }
         if ( ContentRect.left < 0 ) {
-          newStyles.left = BaseRect.left - ContentRect.left;
+          newStyles.left = BaseRect.left - ContentRect.left
         }
         if ( ContentRect.right > screen.width ) {
-          newStyles.left = BaseRect.left - ( ContentRect.right - screen.width );
+          newStyles.left = BaseRect.left - ( ContentRect.right - screen.width )
         }
         if ( ContentRect.bottom > screen.height ) {
-          newStyles.top = BaseRect.top - ( ContentRect.bottom - screen.height );
+          newStyles.top = BaseRect.top - ( ContentRect.bottom - screen.height )
         }
 
-        return newStyles;
+        return newStyles
       }
 
       React.useEffect( () => {
@@ -712,22 +712,22 @@ const Comps = {
           .addClass( style.Open )
           .await( 250 )
           .callback( () => {
-            set_Styles( AdjustExtrusion() );
-          } );
+            set_Styles( AdjustExtrusion() )
+          } )
 
         useStore.update( {
           key: 'customSheet-' + params.sheetID!,
           value: {
             reposition: () => {
               setTimeout( () => {
-                set_Styles( AdjustExtrusion() );
-              },200 );
+                set_Styles( AdjustExtrusion() )
+              },200 )
             }
           }
-        } );
-      },[] );
+        } )
+      },[] )
 
-      if ( !Parent[ 0 ] ) return null;
+      if ( !Parent[ 0 ] ) return null
 
       return <Box
         className={ [
@@ -767,7 +767,7 @@ const Comps = {
             { $.is.function( Content ) ? <Content /> : Content }
           </Box>
         </Flex>
-      </Box>;
+      </Box>
     },
   },
   TapSensor: ( params: {
@@ -776,7 +776,7 @@ const Comps = {
   } ) => ( <Buttons.Button.Plain
     className={ style.TapSensor }
     onClick={ () => {
-      if ( params.delegateAroundClick ?? false ) Sheet.close( params.sheetID );
+      if ( params.delegateAroundClick ?? false ) Sheet.close( params.sheetID )
     } }
     freeCSS={ {
       cursor: 'default'
@@ -792,49 +792,49 @@ $( document )
   .addEvent( {
     eventType: 'keyup',
     callback: function ( event ) {
-      let { key,metaKey } = event as any;
+      let { key,metaKey } = event as any
       if ( key == 'Escape' || key == ',' && metaKey ) {
-        let OpenSheets = Object.values( Comps.contents ).filter( ( elm ) => elm.open );
-        if ( !OpenSheets.length ) return;
+        let OpenSheets = Object.values( Comps.contents ).filter( ( elm ) => elm.open )
+        if ( !OpenSheets.length ) return
         let latestSheet = OpenSheets.reduce( ( a,b ) => {
-          return a.created_at.value > b.created_at.value ? a : b;
-        } );
-        Sheet.close( latestSheet.params.sheetID!,key );
+          return a.created_at.value > b.created_at.value ? a : b
+        } )
+        Sheet.close( latestSheet.params.sheetID!,key )
       }
     }
   } )
   .addEvent( {
     eventType: 'click',
     callback: function ( event ) {
-      let customSheets = Object.values( Comps.contents ).filter( ( elm ) => elm.params.type == 'custom' );
-      if ( !customSheets.length ) return;
+      let customSheets = Object.values( Comps.contents ).filter( ( elm ) => elm.params.type == 'custom' )
+      if ( !customSheets.length ) return
       let isParent = !!customSheets.find( ( customSheet ) => {
-        let { params } = customSheet;
-        let Parent = $( ( params as amotify.fn.Sheet.CustomParams ).parent );
-        let Target = $( event.target );
-        return Parent[ 0 ] == Target[ 0 ] || !!Parent.find( Target ).length;
-      } );
-      if ( isParent ) return;
-      if ( event.target?.closest( '.' + style.CustomSheet ) ) return;
+        let { params } = customSheet
+        let Parent = $( ( params as amotify.fn.Sheet.CustomParams ).parent )
+        let Target = $( event.target )
+        return Parent[ 0 ] == Target[ 0 ] || !!Parent.find( Target ).length
+      } )
+      if ( isParent ) return
+      if ( event.target?.closest( '.' + style.CustomSheet ) ) return
 
       customSheets.forEach( ( customSheets ) => {
         if ( !!customSheets.params.close_option?.aroundClick ) {
-          Sheet.close( customSheets.params.sheetID! );
+          Sheet.close( customSheets.params.sheetID! )
         }
-      } );
+      } )
     }
-  } );
+  } )
 
 const Sheet: amotify.fn.Sheet.Methods = {
   open: ( params ) => {
-    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' );
+    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' )
     if ( params.type == 'image' ) {
       let {
         type,
         sheetID = $.uuidGen(),
         src,
         ...others
-      } = params as amotify.fn.Sheet.ImageParams;
+      } = params as amotify.fn.Sheet.ImageParams
 
       Sheet.open( {
         type: 'normal.topCenter',
@@ -850,11 +850,11 @@ const Sheet: amotify.fn.Sheet.Methods = {
           transformOrigin: 'top'
         },
         content: () => {
-          let [ val_image ] = React.useState( $.flatArray( src ) );
-          let [ val_viewIndex,set_viewIndex ] = React.useState( 0 );
+          let [ val_image ] = React.useState( $.flatArray( src ) )
+          let [ val_viewIndex,set_viewIndex ] = React.useState( 0 )
 
-          let Radio: amotify.fn.Input.List.OptionParams[] = [];
-          let Slides: ReactElement[] = [];
+          let Radio: amotify.fn.Input.List.OptionParams[] = []
+          let Slides: ReactElement[] = []
           val_image.forEach( ( src,index ) => {
             Radio.push( {
               value: index,
@@ -866,12 +866,12 @@ const Sheet: amotify.fn.Sheet.Methods = {
                   maxHeight: 12 * 3
                 } }
               />
-            } );
+            } )
             Slides.push( <Img
               width={ 1 }
               height={ 'auto' }
               src={ $.flatArray( src )[ 0 ] }
-            /> );
+            /> )
           } )
           return <Column
             gap={ 0 }
@@ -890,7 +890,7 @@ const Sheet: amotify.fn.Sheet.Methods = {
                 override='force'
                 horizontalAlign='center'
                 onUpdateValidValue={ ( { value } ) => {
-                  set_viewIndex( value[ 0 ] );
+                  set_viewIndex( value[ 0 ] )
                 } }
                 cellStyles={ {
                   borderWidth: 2,
@@ -903,7 +903,7 @@ const Sheet: amotify.fn.Sheet.Methods = {
                 ssSphere={ 3 }
                 fontSize={ '4.thirdTitle' }
                 onClick={ () => {
-                  Sheet.close( sheetID! );
+                  Sheet.close( sheetID! )
                 } }
               >
                 <FAI.Times />
@@ -914,7 +914,7 @@ const Sheet: amotify.fn.Sheet.Methods = {
               options={ {
                 loop: val_image.length > 1,
                 onSlideCallback: ( index ) => {
-                  set_viewIndex( index );
+                  set_viewIndex( index )
                 }
               } }
               slides={ Slides }
@@ -925,57 +925,57 @@ const Sheet: amotify.fn.Sheet.Methods = {
                 { View }
               </Box> ) }
             />
-          </Column>;
+          </Column>
         },
-      } );
-      return;
+      } )
+      return
     }
-    Comps.Launch( params );
+    Comps.Launch( params )
   },
   refresh: ( params,open ) => {
-    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' );
+    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' )
 
-    let component = useStore.get( params.sheetID! );
-    if ( component && component.refresh ) component.refresh( params,open );
+    let component = useStore.get( params.sheetID! )
+    if ( component && component.refresh ) component.refresh( params,open )
   },
   resize: ( params ) => {
-    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' );
-    let component = useStore.get( params.sheetID! );
-    if ( component && component.resize ) component.resize( params.size );
+    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' )
+    let component = useStore.get( params.sheetID! )
+    if ( component && component.resize ) component.resize( params.size )
   },
   reposition: ( sheetID ) => {
-    let Comps = useStore.get( 'customSheet-' + sheetID );
-    if ( Comps && Comps.reposition ) Comps.reposition();
+    let Comps = useStore.get( 'customSheet-' + sheetID )
+    if ( Comps && Comps.reposition ) Comps.reposition()
   },
   close: function ( sheetID,et,force ) {
-    let Content;
-    sheetID = sheetID?.replace( /\./g,'-' );
-    Content = Comps.contents[ sheetID ];
+    let Content
+    sheetID = sheetID?.replace( /\./g,'-' )
+    Content = Comps.contents[ sheetID ]
 
-    if ( !Content ) return;
-    if ( et == 'Escape' && !Content.params.close_option?.escapeKeyDown ) return;
+    if ( !Content ) return
+    if ( et == 'Escape' && !Content.params.close_option?.escapeKeyDown ) return
 
     {
-      let { params } = Content;
-      let { sheetID } = params;
+      let { params } = Content
+      let { sheetID } = params
 
-      let component = useStore.get( sheetID! );
-      component && component.close && component.close( force );
+      let component = useStore.get( sheetID! )
+      component && component.close && component.close( force )
     }
   },
   closeGroup: ( sheetGroup ) => {
-    sheetGroup = ( sheetGroup || '' ).replace( /\./g,'-' );
+    sheetGroup = ( sheetGroup || '' ).replace( /\./g,'-' )
 
     for ( let [ key,value ] of Object.entries( Comps.contents ) ) {
-      if ( value.params.sheetGroups?.includes( sheetGroup ) ) Sheet.close( key );
+      if ( value.params.sheetGroups?.includes( sheetGroup ) ) Sheet.close( key )
     }
   },
   closeAll: ( pageTransit ) => {
     for ( let [ key,value ] of Object.entries( Comps.contents ) ) {
       if ( pageTransit ) {
-        if ( value.params.close_option?.pageTransit == false ) continue;
+        if ( value.params.close_option?.pageTransit == false ) continue
       }
-      Sheet.close( key,'pageTransit',true );
+      Sheet.close( key,'pageTransit',true )
     }
   },
   Comps: {