ywana-core8 0.1.81 → 0.1.83

package/src/html/list.js

@@ -25,6 +25,7 @@ export const List = (props) => {
         searchable = false,
         searchPlaceholder = "Search...",
         searchBy = ['line1', 'line2'],
+        searchPosition = 'top',
         sortable = false,
         sortBy,
         sortDirection = 'asc',
@@ -32,6 +33,7 @@ export const List = (props) => {
         multiSelect = false,
         onMultiSelect,
         dense = false,
+        outlined = false,
         disabled = false,
         animated = true,
         virtualized = false,
@@ -79,7 +81,7 @@ export const List = (props) => {
     }, [disabled, multiSelect, selected, onSelect, onMultiSelect])
 
     // Handle search
-    const handleSearch = useCallback((searchId, value) => {
+    const handleSearch = useCallback((_, value) => {
         setSearchTerm(value)
     }, [])
 
@@ -123,10 +125,28 @@ export const List = (props) => {
         if (onSort) onSort(newConfig)
     }, [sortable, sortConfig, onSort])
 
+    // Search component JSX - memoized to prevent focus loss
+    const searchComponent = useMemo(() => (
+        searchable && (
+            <div className="list__search">
+                <TextField
+                    id="list-search"
+                    placeholder={searchPlaceholder}
+                    value={searchTerm}
+                    onChange={handleSearch}
+                    icon="search"
+                    outlined={true}
+                    size="small"
+                />
+            </div>
+        )
+    ), [searchable, searchPlaceholder, searchTerm, handleSearch])
+
     // Generate CSS classes
     const cssClasses = [
         'list',
         dense && 'list--dense',
+        outlined && 'list--outlined',
         disabled && 'list--disabled',
         animated && 'list--animated',
         loading && 'list--loading',
@@ -158,23 +178,12 @@ export const List = (props) => {
     if (empty || sortedItems.length === 0) {
         return (
             <div className={cssClasses} style={style} {...ariaAttributes} {...restProps}>
-                {searchable && (
-                    <div className="list__search">
-                        <TextField
-                            id="list-search"
-                            placeholder={searchPlaceholder}
-                            value={searchTerm}
-                            onChange={handleSearch}
-                            icon="search"
-                            outlined={true}
-                            size="small"
-                        />
-                    </div>
-                )}
+                {searchPosition === 'top' && searchComponent}
                 <div className="list__empty">
                     <Icon icon={emptyIcon} size="large" />
                     <Text>{emptyMessage}</Text>
                 </div>
+                {searchPosition === 'bottom' && searchComponent}
                 {children}
             </div>
         )
@@ -195,19 +204,7 @@ export const List = (props) => {
         />
     ) : (
         <div className={cssClasses} style={style} ref={listRef} {...ariaAttributes} {...restProps}>
-            {searchable && (
-                <div className="list__search">
-                    <TextField
-                        id="list-search"
-                        placeholder={searchPlaceholder}
-                        value={searchTerm}
-                        onChange={handleSearch}
-                        icon="search"
-                        outlined={true}
-                        size="small"
-                    />
-                </div>
-            )}
+            {searchPosition === 'top' && searchComponent}
 
             {sortable && sortBy && (
                 <div className="list__sort">
@@ -244,6 +241,7 @@ export const List = (props) => {
                     />
                 ))}
             </ul>
+            {searchPosition === 'bottom' && searchComponent}
             {children}
         </div>
     )
@@ -264,6 +262,7 @@ const GroupedList = (props) => {
         onSearch,
         searchable = false,
         searchPlaceholder = "Search...",
+        searchPosition = 'top',
         multiSelect = false,
         dense = false,
         disabled = false,
@@ -302,21 +301,26 @@ const GroupedList = (props) => {
         })
     }, [])
 
+    // Search component for grouped list - memoized to prevent focus loss
+    const groupedSearchComponent = useMemo(() => (
+        searchable && (
+            <div className="list__search">
+                <TextField
+                    id="grouped-list-search"
+                    placeholder={searchPlaceholder}
+                    value={searchTerm}
+                    onChange={onSearch}
+                    icon="search"
+                    outlined={true}
+                    size="small"
+                />
+            </div>
+        )
+    ), [searchable, searchPlaceholder, searchTerm, onSearch])
+
     return (
         <div className={`${cssClasses} grouped`} style={style} {...ariaAttributes} {...restProps}>
-            {searchable && (
-                <div className="list__search">
-                    <TextField
-                        id="grouped-list-search"
-                        placeholder={searchPlaceholder}
-                        value={searchTerm}
-                        onChange={onSearch}
-                        icon="search"
-                        outlined={true}
-                        size="small"
-                    />
-                </div>
-            )}
+            {searchPosition === 'top' && groupedSearchComponent}
 
             {groups.map(group => {
                 const isCollapsed = collapsedGroups.has(group.name)
@@ -373,6 +377,7 @@ const GroupedList = (props) => {
                     </Fragment>
                 )
             })}
+            {searchPosition === 'bottom' && groupedSearchComponent}
             {children}
         </div>
     )
@@ -509,19 +514,19 @@ const ListItem = ({
                 )}
             </main>
 
-            {/* Meta information */}
-            {meta && (
-                <div className="list__item-meta">
-                    {typeof meta === 'string' ? <Text size="small">{meta}</Text> : meta}
-                </div>
-            )}
-
             {/* Actions */}
             {actions && (
                 <div className="list__item-actions" role="toolbar">
                     {actions}
                 </div>
             )}
+
+            {/* Meta information */}
+            {meta && (
+                <div className="list__item-meta">
+                    {typeof meta === 'string' ? <Text size="small">{meta}</Text> : meta}
+                </div>
+            )}
         </li>
     )
 }
@@ -569,6 +574,8 @@ List.propTypes = {
     searchPlaceholder: PropTypes.string,
     /** Properties to search by */
     searchBy: PropTypes.arrayOf(PropTypes.string),
+    /** Search position */
+    searchPosition: PropTypes.oneOf(['top', 'bottom']),
     /** Enable sorting */
     sortable: PropTypes.bool,
     /** Property to sort by */
@@ -583,6 +590,8 @@ List.propTypes = {
     onMultiSelect: PropTypes.func,
     /** Dense layout */
     dense: PropTypes.bool,
+    /** Outlined variant with borders */
+    outlined: PropTypes.bool,
     /** Disabled state */
     disabled: PropTypes.bool,
     /** Enable animations */

package/src/html/table2.css

@@ -1415,22 +1415,22 @@ body.datatable2-resizing {
 }
 
 .datatable2__filter-cell {
-    padding: 8px 12px;
+    padding: .5rem;
 }
 
 .datatable2__filter-field {
     width: 100% !important;
     height: 32px !important;
-    border: 1px solid var(--divider-color, #e0e0e0) !important;
     border-radius: 4px !important;
-    padding: 4px 8px !important;
     font-size: 0.75rem !important;
     background: white !important;
+    padding-top: 0px !important;
+}
+
+.datatable2__filter-field>input {
 }
 
 .datatable2__filter-field:focus {
-    border-color: var(--primary-color, #2196f3) !important;
-    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
 }
 
 .datatable2__filter-actions-cell {

package/src/html/textfield2.css

@@ -97,11 +97,19 @@
 .textfield2-clear,
 .textfield2-password-toggle {
     position: absolute;
-    top: 1.5rem;
-    right: 0.2rem;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0.75rem;  /* Más espacio desde el borde */
     color: var(--text-color-light, #666);
     cursor: pointer;
     transition: color 0.2s ease;
+    z-index: 2;
+}
+
+/* Icons positioning for outlined variant */
+.textfield2-outlined .textfield2-clear,
+.textfield2-outlined .textfield2-password-toggle {
+    right: 0.75rem;  /* Alineado con el padding del input */
 }
 
 .textfield2-clear:hover,
@@ -109,13 +117,28 @@
     color: var(--text-color, #333);
 }
 
+/* For fields without labels, the centering still works with transform */
 .textfield2.no-label .textfield2-clear,
 .textfield2.no-label .textfield2-password-toggle {
-    top: 0.5rem;
+    /* Remove top override - let transform handle centering */
 }
 
 .textfield2-password-toggle {
-    right: 2.2rem;
+    right: 2.5rem;  /* Más espacio para el clear button */
+}
+
+/* When both clear and password toggle are present */
+.textfield2.textfield2-password .textfield2-clear {
+    right: 2.5rem;
+}
+
+/* Outlined variant - icon spacing */
+.textfield2-outlined .textfield2-password-toggle {
+    right: 2.5rem;
+}
+
+.textfield2-outlined.textfield2-password .textfield2-clear {
+    right: 2.5rem;
 }
 
 .textfield2.textfield2-date .textfield2-clear,
@@ -161,6 +184,32 @@
     transform: scale(0.9);
 }
 
+/* Outlined variant - label positioning when active */
+.textfield2-outlined > input:focus ~ label,
+.textfield2-outlined > input:valid ~ label,
+.textfield2-outlined > input[value]:not([value=""]) ~ label,
+.textfield2-outlined > textarea:focus ~ label,
+.textfield2-outlined > textarea:valid ~ label,
+.textfield2-outlined > textarea[value]:not([value=""]) ~ label,
+.textfield2-outlined.focused > label,
+.textfield2-outlined.has-placeholder > label {
+    top: -0.5rem;  /* Flotando sobre el borde */
+    left: 0.75rem;
+    font-size: 0.875rem;  /* Tamaño más legible */
+    color: var(--primary-color, #2196f3);
+    transform: none;  /* Sin escala adicional */
+}
+
+/* Error state for outlined labels */
+.textfield2-outlined.error > input:focus ~ label,
+.textfield2-outlined.error > textarea:focus ~ label,
+.textfield2-outlined.invalid > input:focus ~ label,
+.textfield2-outlined.invalid > textarea:focus ~ label,
+.textfield2-outlined.error.focused > label,
+.textfield2-outlined.invalid.focused > label {
+    color: var(--error-color, #f44336);
+}
+
 .textfield2.error > input:focus ~ label,
 .textfield2.error > textarea:focus ~ label,
 .textfield2.invalid > input:focus ~ label,
@@ -228,12 +277,18 @@
     display: flex;
     align-items: center;
     gap: 0.25rem;
-    margin-top: 0.25rem;
+    margin-top: 0.5rem;  /* Más espacio desde el input */
     font-size: 0.75rem;
     line-height: 1.2;
     min-height: 1rem;
 }
 
+/* Helper text for outlined variant */
+.textfield2-outlined .textfield2-helper {
+    margin-top: 0.5rem;
+    margin-left: 0.75rem;  /* Alineado con el input */
+}
+
 .textfield2-helper.helper {
     color: var(--text-color-light, #666);
 }
@@ -246,39 +301,71 @@
     flex-shrink: 0;
 }
 
-/* Outlined variant */
+/* Outlined variant - Container structure */
 .textfield2-outlined {
-    border: 1px solid var(--divider-color, #e0e0e0);
-    border-radius: 4px;
-    padding: 0.5rem;
-    background-color: var(--paper-color, #fff);
+    position: relative;
+    margin-bottom: 1.5rem;  /* Espacio para helper text */
 }
 
+/* Outlined input container - solo el input tiene borde */
 .textfield2-outlined > input,
 .textfield2-outlined > textarea {
-    border: none;
-    padding: 0.5rem;
+    width: 100%;
+    border: 1px solid var(--divider-color, #e0e0e0);
+    border-radius: 4px;
+    padding: 1rem 3rem 1rem 0.75rem;  /* Espacio para iconos a la derecha */
+    background-color: var(--paper-color, #fff);
+    font-size: 1rem;
+    line-height: 1.5;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
 }
 
-.textfield2-outlined > label {
-    background-color: var(--paper-color, #fff);
-    padding: 0 0.25rem;
-    left: 0.75rem;
-    top: -0.5rem;
+/* Adjust padding when no icons are present */
+.textfield2-outlined:not(.has-icons) > input,
+.textfield2-outlined:not(.has-icons) > textarea {
+    padding-right: 0.75rem;
 }
 
-.textfield2-outlined.focused,
+/* Focus states for outlined inputs */
 .textfield2-outlined > input:focus,
-.textfield2-outlined > textarea:focus {
+.textfield2-outlined > textarea:focus,
+.textfield2-outlined.focused > input,
+.textfield2-outlined.focused > textarea {
     border-color: var(--primary-color, #2196f3);
-    outline: none;
+    box-shadow: 0 0 0 1px var(--primary-color, #2196f3);
 }
 
-.textfield2-outlined.error,
-.textfield2-outlined.invalid {
+/* Error states for outlined inputs */
+.textfield2-outlined.error > input,
+.textfield2-outlined.error > textarea,
+.textfield2-outlined.invalid > input,
+.textfield2-outlined.invalid > textarea {
     border-color: var(--error-color, #f44336);
 }
 
+.textfield2-outlined.error > input:focus,
+.textfield2-outlined.error > textarea:focus,
+.textfield2-outlined.invalid > input:focus,
+.textfield2-outlined.invalid > textarea:focus {
+    box-shadow: 0 0 0 1px var(--error-color, #f44336);
+}
+
+/* Outlined label positioning */
+.textfield2-outlined > label {
+    position: absolute;
+    left: 0.75rem;
+    top: 1rem;  /* Centrado en el input */
+    background-color: var(--paper-color, #fff);
+    padding: 0 0.25rem;
+    font-size: 1rem;
+    color: var(--text-color-light, #666);
+    transition: all 0.2s ease;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* Hide the focus bar for outlined variant */
 .textfield2-outlined .textfield2-bar {
     display: none;
 }

package/src/html/textfield2.example.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./textfield2'
+import { TextField2, TextArea2, PasswordField2, DropDown2, DateRange2 } from './textfield2'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos de uso de los componentes TextField2 mejorados

package/src/html/textfield2.js

@@ -51,6 +51,7 @@ export const TextField2 = (props) => {
     const [isFocused, setIsFocused] = useState(false)
     const [internalError, setInternalError] = useState('')
     const [isValid, setIsValid] = useState(true)
+    const [hasBeenTouched, setHasBeenTouched] = useState(false)
     const inputRef = useRef(null)
     const debounceRef = useRef(null)
 
@@ -59,8 +60,15 @@ export const TextField2 = (props) => {
         console.warn('TextField2 component: id prop is required')
     }
 
-    // Validate value and set error states
+    // Validate value and set error states - only after user interaction
     useEffect(() => {
+        // Don't validate required fields until user has interacted with the field
+        if (!hasBeenTouched && required && !value) {
+            setIsValid(true)
+            setInternalError('')
+            return
+        }
+
         if (validation && value !== undefined) {
             const validationResult = validation(value)
             const valid = typeof validationResult === 'boolean' ? validationResult : validationResult.valid
@@ -72,27 +80,32 @@ export const TextField2 = (props) => {
             if (onValidation) {
                 onValidation(id, valid, errorMessage)
             }
-        } else if (required && !value) {
+        } else if (required && !value && hasBeenTouched) {
             setIsValid(false)
             setInternalError('This field is required')
         } else {
             setIsValid(true)
             setInternalError('')
         }
-    }, [value, required, id]) // Removed validation and onValidation from dependencies to prevent infinite loops
+    }, [value, required, id, hasBeenTouched]) // Added hasBeenTouched to dependencies
 
     // Handle input changes with debouncing
     const handleChange = useCallback((event) => {
         if (disabled || readOnly) return
-        
+
         event.stopPropagation()
         const newValue = event.target.value
-        
+
+        // Mark field as touched on first change
+        if (!hasBeenTouched) {
+            setHasBeenTouched(true)
+        }
+
         // Clear previous debounce
         if (debounceRef.current) {
             clearTimeout(debounceRef.current)
         }
-        
+
         if (debounceMs > 0) {
             debounceRef.current = setTimeout(() => {
                 if (onChange) onChange(id, newValue, event)
@@ -100,7 +113,7 @@ export const TextField2 = (props) => {
         } else {
             if (onChange) onChange(id, newValue, event)
         }
-    }, [disabled, readOnly, id, onChange, debounceMs])
+    }, [disabled, readOnly, id, onChange, debounceMs, hasBeenTouched])
 
     // Handle key press events
     const handleKeyPress = useCallback((event) => {
@@ -131,10 +144,16 @@ export const TextField2 = (props) => {
     // Handle blur events
     const handleBlur = useCallback((event) => {
         if (disabled) return
-        
+
         setIsFocused(false)
+
+        // Mark field as touched on blur if it hasn't been touched yet
+        if (!hasBeenTouched) {
+            setHasBeenTouched(true)
+        }
+
         if (onBlur) onBlur(event)
-    }, [disabled, onBlur])
+    }, [disabled, onBlur, hasBeenTouched])
 
     // Handle clear action
     const handleClear = useCallback(() => {

package/src/widgets/login/LoginBox.css

@@ -2,7 +2,7 @@
   background-color: var(--paper-color);
 }
 
-.login-box > main {
+.login-box>main {
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
@@ -34,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;
@@ -63,6 +65,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -74,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

@@ -5,7 +5,7 @@ import './LoginBox.css'
 /**
  * Login Box
  */
-export const LoginBox = ({
+export const LoginBox = ({ 
     userLabel = "User", userValue = "",
     passwordLabel = "Password", passwordValue = '',
     loginLabel = "Log In",