amotify 0.0.27 → 0.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.27",
+  "version": "0.0.30",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",
@@ -66,4 +66,4 @@
     "webpack-cli": "^5.1.4",
     "webpack-remove-empty-scripts": "^1.0.4"
   }
-}
+}

package/src/@jsminAmotifyExtension/fetch.tsx

@@ -49,7 +49,8 @@ const fetcher = async ( params: JsminExtension.Fetch.Input & {
       url,
       ...Params
     } );
-    if ( $.fetch.defaultResultCallback ) $.fetch.defaultResultCallback( result );
+
+    $.fetch.defaultResultCallback && $.fetch.defaultResultCallback( result );
 
     if ( trafficControl ) {
       let { requestTime } = result;

package/src/functions/Button/_.tsx

@@ -277,7 +277,6 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
     } = Params as amotify.fn.Buttons.AnchorInput;
 
     return <button
-      { ...Props as any }
       onClick={ ( event ) => {
         let aux = event.ctrlKey || event.metaKey;
 
@@ -292,6 +291,7 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
           pageTransit.push( URL,!!openNew );
         }
       } }
+      { ...Props as any }
     />;
   }
   return null;

package/src/functions/Input/File/_.tsx

@@ -229,55 +229,54 @@ const FileList: React.FC<{
   } );
 
   if ( Left > 0 ) {
-    Files.push(
-      <label
-        key={ 'AddButton' }
-        className={ [ params.cellClassName,style.AddButton ].join( ' ' ) }
-        htmlFor={ params.id }
-        tabIndex={ params.tabIndex }
-        onKeyDown={ ( event ) => {
-          let { key } = event;
-          if ( params.tabIndex != -1 ) {
-            if ( [ ' ','Enter' ].includes( key ) ) {
-              $( '#' + params.id ).click();
-            }
+    Files.push( <label
+      key={ 'AddButton' }
+      className={ [ params.cellClassName,style.AddButton ].join( ' ' ) }
+      data-component-id={ val_status.componentID }
+      htmlFor={ params.id }
+      tabIndex={ params.tabIndex }
+      onKeyDown={ ( event ) => {
+        let { key } = event;
+        if ( params.tabIndex != -1 ) {
+          if ( [ ' ','Enter' ].includes( key ) ) {
+            $( '#' + params.id ).click();
           }
-        } }
+        }
+      } }
+    >
+      <Row.Center
+        padding={ [ '1/3',0 ] }
       >
-        <Row.Center
-          padding={ [ '1/3',0 ] }
+        <Box
+          isRounded
+          className={ style.AddIcon }
         >
+          <FAI
+            icon={ faCloudArrowUp }
+            className={ style.Icon }
+            fontColor={ 'theme' }
+            fontSize='4.thirdTitle'
+            backgroundColor={ 'tcOpLow' }
+            ssSphere={ 4 }
+          />
+        </Box>
+        <Box>
+          <Box
+            children={ 'ファイルを選択' + `（${ Left }）` }
+            fontColor={ 'theme' }
+            fontSize={ '2.normal' }
+            isBoldFont
+          />
           <Box
-            isRounded
-            className={ style.AddIcon }
+            isBoldFont
+            fontColor={ '4.thin' }
+            fontSize={ '0.xs' }
           >
-            <FAI
-              icon={ faCloudArrowUp }
-              className={ style.Icon }
-              fontColor={ 'theme' }
-              fontSize='4.thirdTitle'
-              backgroundColor={ 'tcOpLow' }
-              ssSphere={ 4 }
-            />
+            ファイルをドロップ
           </Box>
-          <Box>
-            <Box
-              children={ 'ファイルを選択' + `（${ Left }）` }
-              fontColor={ 'theme' }
-              fontSize={ '2.normal' }
-              isBoldFont
-            />
-            <Box
-              isBoldFont
-              fontColor={ '4.thin' }
-              fontSize={ '0.xs' }
-            >
-              ファイルをドロップ
-            </Box>
-          </Box>
-        </Row.Center>
-      </label>
-    )
+        </Box>
+      </Row.Center>
+    </label> );
   }
 
   return <Column
@@ -500,8 +499,7 @@ const FileCell: React.FC<{
   </Flex>;
 }
 
-
-( async () => {
+$.fnScope( async () => {
   $( document ).addEvent( {
     eventType: 'dragover',
     callback: ( event ) => {
@@ -520,17 +518,15 @@ const FileCell: React.FC<{
       if ( Files.length ) {
         let Target = event.target as HTMLElement;
         if ( $( Target ).hasClass( style.AddButton ) ) {
-          let { inputComponentId } = Target.dataset;
-          let component = useStore.get( inputComponentId! );
+          let { componentId } = Target.dataset;
+          let component = useStore.get( componentId! );
           if ( component && component.AddFiles ) component.AddFiles( Files );
         }
       }
     },
-    option: {
-      passive: false
-    }
+    option: { passive: false }
   } );
-} )();
+} );
 
 const FileInput: amotify.fn.Input.Filer.Methods = FileComponent as any
 FileInput.fn = {

package/src/functions/Input/core.tsx

@@ -340,7 +340,7 @@ export const CommonEffects: {
 
       $.fnScope( () => {
         if ( !val_validate.ok ) return;
-        if ( $.is.nullish( Value ) ) return;
+        // if ( $.is.nullish( Value ) ) return;
         if ( !onUpdateValidValue ) return;
         onUpdateValidValue( {
           componentID,

package/src/functions/Sheet/parts.tsx

@@ -47,7 +47,7 @@ const Comps = {
       close_option: {
         pageTransit: true,
         escapeKeyDown: true,
-        aroundClick: false,
+        aroundClick: params.type == 'custom',
         ...params.close_option
       },
     }
@@ -626,8 +626,9 @@ const Comps = {
             flexSizing={ 0 }
             overflow={ 'auto' }
             { ...styles }
-            children={ $.is.function( Content ) ? <Content /> : Content }
-          />
+          >
+            { $.is.function( Content ) ? <Content /> : Content }
+          </Box>
         </Column>
       </Box>;
     },
@@ -683,27 +684,24 @@ const Comps = {
 
         let newStyles = { ...val_Styles }
         if ( ContentRect.top < 0 ) {
-          if ( ContentRect.height < screen.height ) {
-            newStyles.top = ContentRect.top - ContentRect.top;
-          }
+          // if ( ContentRect.height < screen.height ) {}
+          newStyles.top = ContentRect.height + 2;
         }
         if ( ContentRect.left < 0 ) {
-          if ( ContentRect.width < screen.width ) {
-            newStyles.left = ContentRect.left - ContentRect.left;
-          }
+          // if ( ContentRect.width < screen.width ) {}
+          newStyles.left = ContentRect.width + 2;
         }
         if ( ContentRect.right > screen.width ) {
-          if ( ContentRect.width < screen.width ) {
-            let shift = ContentRect.right - screen.width;
-            newStyles.left = ContentRect.left - shift;
-          }
+          // if ( ContentRect.width < screen.width ) {}
+          let shift = ContentRect.right - screen.width;
+          newStyles.left = ContentRect.left - shift - 2;
         }
         if ( ContentRect.bottom > screen.height ) {
-          if ( ContentRect.height < screen.height ) {
-            let shift = ContentRect.bottom - screen.height;
-            newStyles.top = ContentRect.top - shift;
-          }
+          // if ( ContentRect.height < screen.height ) {}
+          let shift = ContentRect.bottom - screen.height;
+          newStyles.top = ContentRect.top - shift - 2;
         }
+
         return newStyles;
       }
 
@@ -757,8 +755,13 @@ const Comps = {
             flexSizing={ 'none' }
             data-sheet-content={ val_componentID }
             { ...others }
-            children={ $.is.function( Content ) ? <Content /> : Content }
-          />
+            freeCSS={ {
+              maxWidth: '98vw',
+              ...others.freeCSS,
+            } }
+          >
+            { $.is.function( Content ) ? <Content /> : Content }
+          </Box>
         </Flex>
       </Box>;
     },