ywana-core8 0.1.80 → 0.1.82

package/src/html/tooltip.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Text } from './text'
 import './tooltip.css'
 
@@ -11,11 +11,29 @@ export const Tooltip = (props) => {
 
     const style = { top, left }
 
+    // Text element - support both string and React components
+    const textElement = useMemo(() => {
+        if (!text) return null
+
+        // If text is already a React element, use it directly
+        if (React.isValidElement(text)) {
+            return text
+        }
+
+        // If text is a string, wrap it in Text component
+        if (typeof text === 'string') {
+            return <Text>{text}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(text)}</Text>
+    }, [text])
+
     return (
         <div className="tooltip" >
-            <span className="tooltip-text" style={style}><Text>{text}</Text></span>
+            <span className="tooltip-text" style={style}>{textElement}</span>
             {props.children}
         </div>
     )
 
-} 
+}

package/src/widgets/login/LoginBox.css

@@ -2,10 +2,11 @@
   background-color: var(--paper-color);
 }
 
-.login-box > main {
+.login-box>main {
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
+  gap: 1rem
 }
 
 .login-box .message {
@@ -33,24 +34,26 @@
 }
 
 @keyframes rotation-counterclock {
-    from {
-      transform: rotate(359deg);
-    }
-    to {
-      transform: rotate(0deg);
-    }
+  from {
+    transform: rotate(359deg);
+  }
+
+  to {
+    transform: rotate(0deg);
   }
+}
 
 @keyframes rotation {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(359deg);
   }
 }
 
-.login-box > footer {
+.login-box>footer {
   grid-area: footer;
   padding: 1rem;
   display: flex;
@@ -62,6 +65,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -73,7 +77,7 @@
 }
 
 .login-box .forgot-button {
-    text-align: right;
-    font-weight: 500;
-    max-width: 15rem;
+  text-align: right;
+  font-weight: 500;
+  max-width: 15rem;
 }

package/src/widgets/login/LoginBox.js

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
-import { Icon , Button, Text, TextField } from '../../html'
+import { Icon , Button, Text, TextField2 as TextField } from '../../html'
 import './LoginBox.css'
 
 /**
  * Login Box
  */
-export const LoginBox = ({
+export const LoginBox = ({ 
     userLabel = "User", userValue = "",
     passwordLabel = "Password", passwordValue = '',
     loginLabel = "Log In",
@@ -24,23 +24,46 @@ export const LoginBox = ({
         if (onOK && canOK()) onOK(user, forcedPwd || password)
     }
 
+    // Helper function for backward compatibility
+    // TextField2 now supports both strings and React elements
     function tx(txt) {
+        // For TextField2, we can pass strings directly for better performance
+        // But keep this function for backward compatibility with other components
         return <Text>{txt}</Text>
     }
 
-    function changeUser(id, value) {
+    function changeUser(_, value) {
         setUser(value)
     }
-    
-    function changePassword(id, value) {
+
+    function changePassword(_, value) {
         setPassword(value)
     }
 
     return (
         <div className="login-box">
             <main>
-                <TextField label={tx(userLabel)} value={user} onChange={changeUser} onEnter={ok} outlined autoComplete="on" />
-                <TextField id="loginbox-password" label={tx(passwordLabel)} value={password} onChange={changePassword} onEnter={ok} type="password" outlined autoComplete="on" />
+                <TextField
+                    id="loginbox-user"
+                    label={tx(userLabel)}
+                    value={user}
+                    onChange={changeUser}
+                    onEnter={ok}
+                    outlined
+                    autoComplete="username"
+                    required
+                />
+                <TextField
+                    id="loginbox-password"
+                    label={tx(passwordLabel)}
+                    value={password}
+                    onChange={changePassword}
+                    onEnter={ok}
+                    type="password"
+                    outlined
+                    autoComplete="current-password"
+                    required
+                />
             </main>
             <footer>
                 { loading ? <div className="load-box"><Icon icon="refresh" /></div> : null }