ywana-core8 0.1.76 → 0.1.77

package/src/html/textfield2.js

@@ -65,10 +65,10 @@ export const TextField2 = (props) => {
             const validationResult = validation(value)
             const valid = typeof validationResult === 'boolean' ? validationResult : validationResult.valid
             const errorMessage = typeof validationResult === 'object' ? validationResult.message : ''
-            
+
             setIsValid(valid)
             setInternalError(valid ? '' : errorMessage || (required && !value ? 'This field is required' : 'Invalid value'))
-            
+
             if (onValidation) {
                 onValidation(id, valid, errorMessage)
             }
@@ -79,7 +79,7 @@ export const TextField2 = (props) => {
             setIsValid(true)
             setInternalError('')
         }
-    }, [value, validation, required, id, onValidation])
+    }, [value, required, id]) // Removed validation and onValidation from dependencies to prevent infinite loops
 
     // Handle input changes with debouncing
     const handleChange = useCallback((event) => {
@@ -169,6 +169,7 @@ export const TextField2 = (props) => {
         readOnly && 'readonly',
         error || internalError ? 'error' : '',
         !isValid && 'invalid',
+        placeholder && 'has-placeholder',
         safeClassName,
         id
     ].filter(Boolean).join(' ')
@@ -941,9 +942,15 @@ export const DateRange2 = (props) => {
     // Initialize form from value
     useEffect(() => {
         if (value && typeof value === 'object') {
-            setForm({
-                from: value.from || '',
-                to: value.to || ''
+            setForm(prevForm => {
+                // Only update if values are actually different
+                if (prevForm.from !== (value.from || '') || prevForm.to !== (value.to || '')) {
+                    return {
+                        from: value.from || '',
+                        to: value.to || ''
+                    }
+                }
+                return prevForm
             })
         }
     }, [value])
@@ -978,14 +985,20 @@ export const DateRange2 = (props) => {
         if (onValidation) {
             onValidation(id, valid, errorMessage)
         }
-    }, [form, required, minDate, maxDate, id, onValidation])
+    }, [form, required, minDate, maxDate, id]) // Removed onValidation to prevent infinite loops
 
     // Handle form changes
     useEffect(() => {
         if (form.from && form.to && onChange) {
-            onChange(id, form)
+            // Only call onChange if the form values are different from the current value
+            const hasChanged = !value ||
+                              value.from !== form.from ||
+                              value.to !== form.to
+            if (hasChanged) {
+                onChange(id, form)
+            }
         }
-    }, [form, id, onChange])
+    }, [form, id, value]) // Added value to check for changes
 
     // Handle field changes
     const handleChange = useCallback((fieldId, fieldValue) => {

package/src/html/tree.css

@@ -39,7 +39,10 @@
 
 .tree-item>.label {
     padding-left: .8rem;
-    width: 100%;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .tree-item>.label.clickable:hover {
@@ -47,6 +50,14 @@
     color: var(--accent-color);
 }
 
+/* TreeNode label text */
+.tree-node__label-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .tree-item>.actions {
     padding: 0 .5rem;
     color: var(--text-color-lighter);
@@ -59,18 +70,7 @@
     height: 2rem;
 }
 
-.tree-node>summary::before {
-    content: "\25B6";
-    color: black;
-    display: inline-block;
-    margin-right: 6px;
-    font-size: 10px;
-    color: rgba(0,0,0,.3);
-}
-
-details[open].tree-node>summary::before {
-	transform: rotate(90deg)
-}
+/* Removed native CSS triangle icon to avoid duplication with Material Design icons */
 
 /* Enhanced Tree Styles - New functionality while maintaining compatibility */
 
@@ -221,13 +221,15 @@ details[open].tree-node>summary::before {
     font-weight: 500;
     padding: 0.125rem 0.375rem;
     border-radius: 10px;
-    margin-left: 0.5rem;
+    margin: 0.5rem;
     min-width: 1.25rem;
     height: 1.25rem;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
+    flex-shrink: 0;
+    white-space: nowrap;
 }
 
 /* TreeNode children */
@@ -291,7 +293,7 @@ details[open].tree-node>summary::before {
     font-weight: 500;
     padding: 0.125rem 0.375rem;
     border-radius: 10px;
-    margin-left: 0.5rem;
+    margin: 0.5rem;
     min-width: 1.25rem;
     height: 1.25rem;
     display: flex;

package/src/html/tree.js

@@ -102,7 +102,7 @@ export const Tree = (props) => {
         return (
             <div className={cssClasses} style={style} {...ariaAttributes} {...restProps}>
                 <div className="tree__loading">
-                    <Icon icon="hourglass_empty" size="medium" />
+                    <Icon icon="hourglass_empty" size="normal" />
                     <Text>Loading...</Text>
                 </div>
             </div>
@@ -165,7 +165,7 @@ export const Tree = (props) => {
                             aria-label="Expand all nodes"
                         >
                             <Icon icon="unfold_more" size="small" />
-                            <Text size="small">Expand All</Text>
+                            <Text size="sm">Expand All</Text>
                         </button>
                     )}
                     {collapseAll && (
@@ -175,7 +175,7 @@ export const Tree = (props) => {
                             aria-label="Collapse all nodes"
                         >
                             <Icon icon="unfold_less" size="small" />
-                            <Text size="small">Collapse All</Text>
+                            <Text size="sm">Collapse All</Text>
                         </button>
                     )}
                 </div>
@@ -376,7 +376,9 @@ export const TreeNode = (props) => {
                     className={`label ${clickable}`}
                     onClick={handleSelect}
                 >
-                    {labelTxt}
+                    <span className="tree-node__label-text">
+                        {labelTxt}
+                    </span>
                     {badge && (
                         <span className="tree-node__badge">
                             {typeof badge === 'number' && badge > 99 ? '99+' : badge}