ywana-core8 0.1.75 → 0.1.77

package/src/html/textfield2.js

@@ -0,0 +1,1143 @@
+import React, { useContext, useEffect, useState, useCallback, useRef, useMemo } from 'react'
+import PropTypes from 'prop-types'
+import { SiteContext } from '../site/siteContext'
+import { Icon } from './icon'
+import { Text } from './text'
+import './textfield2.css'
+
+/**
+ * Enhanced TextField component with improved validation and accessibility
+ */
+export const TextField2 = (props) => {
+    const {
+        id,
+        type = 'text',
+        className,
+        label,
+        labelPosition = 'top',
+        placeholder,
+        value,
+        outlined = false,
+        readOnly = false,
+        disabled = false,
+        required = false,
+        canClear = true,
+        showPasswordToggle = true,
+        autoComplete = 'off',
+        error,
+        helperText,
+        maxLength,
+        minLength,
+        pattern,
+        step,
+        min,
+        max,
+        rows = 3,
+        validation,
+        debounceMs = 0,
+        ariaLabel,
+        ariaDescribedBy,
+        onChange,
+        onEnter,
+        onClick,
+        onFocus,
+        onBlur,
+        onValidation,
+        ...restProps
+    } = props
+
+    const site = useContext(SiteContext)
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+    const [isFocused, setIsFocused] = useState(false)
+    const [internalError, setInternalError] = useState('')
+    const [isValid, setIsValid] = useState(true)
+    const inputRef = useRef(null)
+    const debounceRef = useRef(null)
+
+    // Validate required props
+    if (!id) {
+        console.warn('TextField2 component: id prop is required')
+    }
+
+    // Validate value and set error states
+    useEffect(() => {
+        if (validation && value !== undefined) {
+            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)
+            }
+        } else if (required && !value) {
+            setIsValid(false)
+            setInternalError('This field is required')
+        } else {
+            setIsValid(true)
+            setInternalError('')
+        }
+    }, [value, required, id]) // Removed validation and onValidation from dependencies to prevent infinite loops
+
+    // Handle input changes with debouncing
+    const handleChange = useCallback((event) => {
+        if (disabled || readOnly) return
+        
+        event.stopPropagation()
+        const newValue = event.target.value
+        
+        // Clear previous debounce
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current)
+        }
+        
+        if (debounceMs > 0) {
+            debounceRef.current = setTimeout(() => {
+                if (onChange) onChange(id, newValue, event)
+            }, debounceMs)
+        } else {
+            if (onChange) onChange(id, newValue, event)
+        }
+    }, [disabled, readOnly, id, onChange, debounceMs])
+
+    // Handle key press events
+    const handleKeyPress = useCallback((event) => {
+        if (disabled) return
+        
+        const key = event.charCode || event.keyCode || 0
+        if (key === 13 && onEnter) {
+            event.preventDefault()
+            onEnter(event)
+        }
+    }, [disabled, onEnter])
+
+    // Handle focus events
+    const handleFocus = useCallback((event) => {
+        if (disabled) return
+        
+        setIsFocused(true)
+        if (onFocus) onFocus(event)
+        
+        // Site context focus management
+        if (site && site.changeFocus) {
+            site.changeFocus({
+                lose: () => setIsFocused(false)
+            })
+        }
+    }, [disabled, onFocus, site])
+
+    // Handle blur events
+    const handleBlur = useCallback((event) => {
+        if (disabled) return
+        
+        setIsFocused(false)
+        if (onBlur) onBlur(event)
+    }, [disabled, onBlur])
+
+    // Handle clear action
+    const handleClear = useCallback(() => {
+        if (disabled || readOnly) return
+        
+        if (onChange) onChange(id, '', { target: { value: '' } })
+        if (inputRef.current) {
+            inputRef.current.focus()
+        }
+    }, [disabled, readOnly, id, onChange])
+
+    // Handle password visibility toggle
+    const handlePasswordToggle = useCallback(() => {
+        if (disabled) return
+        setIsPasswordVisible(!isPasswordVisible)
+    }, [disabled, isPasswordVisible])
+
+    // Generate CSS classes
+    const borderStyle = outlined ? 'textfield2-outlined' : 'textfield2'
+    const labelStyle = label ? '' : 'no-label'
+    const labelPositionStyle = labelPosition === 'left' ? 'label-left' : 'label-top'
+    const safeClassName = className || ''
+    
+    const cssClasses = [
+        'textfield2',
+        borderStyle,
+        labelStyle,
+        labelPositionStyle,
+        `textfield2-${type}`,
+        isFocused && 'focused',
+        disabled && 'disabled',
+        readOnly && 'readonly',
+        error || internalError ? 'error' : '',
+        !isValid && 'invalid',
+        placeholder && 'has-placeholder',
+        safeClassName,
+        id
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || label,
+        'aria-describedby': ariaDescribedBy || (error || internalError || helperText ? `${id}-helper` : undefined),
+        'aria-invalid': !isValid || !!(error || internalError),
+        'aria-required': required,
+        'aria-disabled': disabled,
+        'aria-readonly': readOnly
+    }
+
+    // Input attributes
+    const inputAttributes = {
+        id,
+        type: type === 'password' && isPasswordVisible ? 'text' : type,
+        placeholder: site?.translate ? site.translate(placeholder) : placeholder,
+        value: value || '',
+        required,
+        disabled,
+        readOnly,
+        maxLength,
+        minLength,
+        pattern,
+        step,
+        min,
+        max,
+        autoComplete,
+        ...ariaAttributes,
+        ...restProps
+    }
+
+    // Label text
+    const labelTxt = label ? <Text>{label}</Text> : null
+    const placeholderTxt = site?.translate ? site.translate(placeholder) : placeholder
+
+    // Error/helper text
+    const displayError = error || internalError
+    const displayHelperText = helperText && !displayError
+
+    return (
+        <div className={cssClasses} onClick={onClick}>
+            {type === 'textarea' ? (
+                <textarea
+                    ref={inputRef}
+                    rows={rows}
+                    placeholder={placeholderTxt}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyPress}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    {...inputAttributes}
+                />
+            ) : (
+                <input
+                    ref={inputRef}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyPress}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    {...inputAttributes}
+                />
+            )}
+            
+            {/* Clear button */}
+            {!readOnly && !disabled && canClear && value && value.length > 0 && (
+                <Icon 
+                    icon="close" 
+                    clickable 
+                    size="small" 
+                    action={handleClear}
+                    className="textfield2-clear"
+                    ariaLabel="Clear field"
+                />
+            )}
+            
+            {/* Password toggle */}
+            {type === 'password' && showPasswordToggle && !disabled && (
+                <Icon 
+                    icon={isPasswordVisible ? 'visibility' : 'visibility_off'}
+                    clickable 
+                    size="small" 
+                    action={handlePasswordToggle}
+                    className="textfield2-password-toggle"
+                    ariaLabel={isPasswordVisible ? 'Hide password' : 'Show password'}
+                />
+            )}
+            
+            {/* Focus bar */}
+            <span className="textfield2-bar"></span>
+            
+            {/* Label */}
+            {label && <label htmlFor={id}>{labelTxt}</label>}
+            
+            {/* Error/Helper text */}
+            {(displayError || displayHelperText) && (
+                <div 
+                    id={`${id}-helper`}
+                    className={`textfield2-helper ${displayError ? 'error' : 'helper'}`}
+                    role={displayError ? 'alert' : 'status'}
+                    aria-live={displayError ? 'assertive' : 'polite'}
+                >
+                    {displayError && <Icon icon="error" size="small" />}
+                    <Text>{displayError || helperText}</Text>
+                </div>
+            )}
+        </div>
+    )
+}
+
+/**
+ * Enhanced TextArea component
+ */
+export const TextArea2 = (props) => {
+    return <TextField2 {...props} type="textarea" />
+}
+
+/**
+ * Enhanced PasswordField component
+ */
+export const PasswordField2 = (props) => {
+    return <TextField2 {...props} type="password" />
+}
+
+// PropTypes for TextField2
+TextField2.propTypes = {
+    /** Unique identifier for the field */
+    id: PropTypes.string.isRequired,
+    /** Input type */
+    type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime-local', 'month', 'week', 'textarea']),
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Field label */
+    label: PropTypes.string,
+    /** Label position */
+    labelPosition: PropTypes.oneOf(['top', 'left']),
+    /** Placeholder text */
+    placeholder: PropTypes.string,
+    /** Field value */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Whether field has outlined style */
+    outlined: PropTypes.bool,
+    /** Whether field is read-only */
+    readOnly: PropTypes.bool,
+    /** Whether field is disabled */
+    disabled: PropTypes.bool,
+    /** Whether field is required */
+    required: PropTypes.bool,
+    /** Whether to show clear button */
+    canClear: PropTypes.bool,
+    /** Whether to show password toggle for password fields */
+    showPasswordToggle: PropTypes.bool,
+    /** HTML autocomplete attribute */
+    autoComplete: PropTypes.string,
+    /** Error message to display */
+    error: PropTypes.string,
+    /** Helper text to display */
+    helperText: PropTypes.string,
+    /** Maximum length */
+    maxLength: PropTypes.number,
+    /** Minimum length */
+    minLength: PropTypes.number,
+    /** Input pattern */
+    pattern: PropTypes.string,
+    /** Step for number inputs */
+    step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Minimum value for number inputs */
+    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Maximum value for number inputs */
+    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Number of rows for textarea */
+    rows: PropTypes.number,
+    /** Validation function */
+    validation: PropTypes.func,
+    /** Debounce delay in milliseconds */
+    debounceMs: PropTypes.number,
+    /** ARIA label */
+    ariaLabel: PropTypes.string,
+    /** ARIA described by */
+    ariaDescribedBy: PropTypes.string,
+    /** Change handler */
+    onChange: PropTypes.func,
+    /** Enter key handler */
+    onEnter: PropTypes.func,
+    /** Click handler */
+    onClick: PropTypes.func,
+    /** Focus handler */
+    onFocus: PropTypes.func,
+    /** Blur handler */
+    onBlur: PropTypes.func,
+    /** Validation handler */
+    onValidation: PropTypes.func
+}
+
+TextField2.defaultProps = {
+    type: 'text',
+    labelPosition: 'top',
+    outlined: false,
+    readOnly: false,
+    disabled: false,
+    required: false,
+    canClear: true,
+    showPasswordToggle: true,
+    autoComplete: 'off',
+    rows: 3,
+    debounceMs: 0,
+    className: ''
+}
+
+// PropTypes for TextArea2
+TextArea2.propTypes = {
+    ...TextField2.propTypes
+}
+
+TextArea2.defaultProps = {
+    ...TextField2.defaultProps,
+    type: 'textarea'
+}
+
+// PropTypes for PasswordField2
+PasswordField2.propTypes = {
+    ...TextField2.propTypes
+}
+
+PasswordField2.defaultProps = {
+    ...TextField2.defaultProps,
+    type: 'password'
+}
+
+/**
+ * Enhanced DropDown component with improved accessibility and functionality
+ */
+export const DropDown2 = (props) => {
+    const {
+        id,
+        options = [],
+        value,
+        placeholder,
+        label,
+        outlined = false,
+        disabled = false,
+        readOnly = false,
+        required = false,
+        searchable = false,
+        clearable = false,
+        multiple = false,
+        groupBy,
+        filterFunction,
+        renderOption,
+        renderValue,
+        position = 'bottom',
+        maxHeight = '200px',
+        error,
+        helperText,
+        className,
+        ariaLabel,
+        onChange,
+        onOpen,
+        onClose,
+        onSearch,
+        ...restProps
+    } = props
+
+    const site = useContext(SiteContext)
+    const [isOpen, setIsOpen] = useState(false)
+    const [searchTerm, setSearchTerm] = useState('')
+    const [focusedIndex, setFocusedIndex] = useState(-1)
+    const [internalError, setInternalError] = useState('')
+    const dropdownRef = useRef(null)
+    const inputRef = useRef(null)
+    const listRef = useRef(null)
+
+    // Validate required props
+    if (!id) {
+        console.warn('DropDown2 component: id prop is required')
+    }
+
+    if (!Array.isArray(options)) {
+        console.warn('DropDown2 component: options must be an array')
+    }
+
+    // Validate required field
+    useEffect(() => {
+        if (required && (!value || (Array.isArray(value) && value.length === 0))) {
+            setInternalError('This field is required')
+        } else {
+            setInternalError('')
+        }
+    }, [value, required])
+
+    // Get display value
+    const getDisplayValue = useCallback(() => {
+        if (!value) return ''
+
+        if (multiple && Array.isArray(value)) {
+            if (value.length === 0) return ''
+            if (value.length === 1) {
+                const option = options.find(opt => opt.value === value[0])
+                return option ? option.label : value[0]
+            }
+            return `${value.length} items selected`
+        }
+
+        const option = options.find(opt => opt.value === value)
+        if (renderValue && option) {
+            return renderValue(option)
+        }
+        return option ? option.label : value
+    }, [value, options, multiple, renderValue])
+
+    // Filter options based on search term
+    const filteredOptions = useMemo(() => {
+        if (!searchTerm || !searchable) return options
+
+        if (filterFunction) {
+            return options.filter(option => filterFunction(option, searchTerm))
+        }
+
+        return options.filter(option =>
+            option.label.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+    }, [options, searchTerm, searchable, filterFunction])
+
+    // Group options if groupBy is provided
+    const groupedOptions = useMemo(() => {
+        if (!groupBy) return [{ options: filteredOptions }]
+
+        const groups = filteredOptions.reduce((acc, option) => {
+            const groupKey = typeof groupBy === 'function' ? groupBy(option) : option[groupBy]
+            if (!acc[groupKey]) {
+                acc[groupKey] = []
+            }
+            acc[groupKey].push(option)
+            return acc
+        }, {})
+
+        return Object.entries(groups).map(([label, options]) => ({ label, options }))
+    }, [filteredOptions, groupBy])
+
+    // Handle option selection
+    const handleSelect = useCallback((selectedValue, option) => {
+        if (disabled || readOnly) return
+
+        let newValue
+        if (multiple) {
+            const currentValues = Array.isArray(value) ? value : []
+            if (currentValues.includes(selectedValue)) {
+                newValue = currentValues.filter(v => v !== selectedValue)
+            } else {
+                newValue = [...currentValues, selectedValue]
+            }
+        } else {
+            newValue = selectedValue
+            setIsOpen(false)
+        }
+
+        if (onChange) {
+            onChange(id, newValue, option)
+        }
+
+        if (!multiple) {
+            setSearchTerm('')
+            setFocusedIndex(-1)
+        }
+    }, [disabled, readOnly, multiple, value, id, onChange])
+
+    // Handle dropdown open/close
+    const handleToggle = useCallback(() => {
+        if (disabled || readOnly) return
+
+        const newOpen = !isOpen
+        setIsOpen(newOpen)
+
+        if (newOpen) {
+            setFocusedIndex(-1)
+            if (onOpen) onOpen()
+        } else {
+            setSearchTerm('')
+            setFocusedIndex(-1)
+            if (onClose) onClose()
+        }
+    }, [disabled, readOnly, isOpen, onOpen, onClose])
+
+    // Handle search input
+    const handleSearch = useCallback((event) => {
+        if (!searchable) return
+
+        const term = event.target.value
+        setSearchTerm(term)
+        setFocusedIndex(-1)
+
+        if (!isOpen) {
+            setIsOpen(true)
+        }
+
+        if (onSearch) {
+            onSearch(term)
+        }
+    }, [searchable, isOpen, onSearch])
+
+    // Handle clear
+    const handleClear = useCallback((event) => {
+        event.stopPropagation()
+        if (disabled || readOnly) return
+
+        const newValue = multiple ? [] : ''
+        if (onChange) {
+            onChange(id, newValue)
+        }
+        setSearchTerm('')
+    }, [disabled, readOnly, multiple, id, onChange])
+
+    // Keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        if (disabled) return
+
+        const flatOptions = groupedOptions.flatMap(group => group.options)
+
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault()
+                if (!isOpen) {
+                    setIsOpen(true)
+                } else {
+                    setFocusedIndex(prev =>
+                        prev < flatOptions.length - 1 ? prev + 1 : 0
+                    )
+                }
+                break
+
+            case 'ArrowUp':
+                event.preventDefault()
+                if (isOpen) {
+                    setFocusedIndex(prev =>
+                        prev > 0 ? prev - 1 : flatOptions.length - 1
+                    )
+                }
+                break
+
+            case 'Enter':
+                event.preventDefault()
+                if (isOpen && focusedIndex >= 0) {
+                    const option = flatOptions[focusedIndex]
+                    if (option) {
+                        handleSelect(option.value, option)
+                    }
+                } else {
+                    handleToggle()
+                }
+                break
+
+            case 'Escape':
+                if (isOpen) {
+                    event.preventDefault()
+                    setIsOpen(false)
+                    setSearchTerm('')
+                    setFocusedIndex(-1)
+                }
+                break
+
+            case 'Tab':
+                if (isOpen) {
+                    setIsOpen(false)
+                    setSearchTerm('')
+                    setFocusedIndex(-1)
+                }
+                break
+        }
+    }, [disabled, isOpen, focusedIndex, groupedOptions, handleSelect, handleToggle])
+
+    // Click outside to close
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false)
+                setSearchTerm('')
+                setFocusedIndex(-1)
+            }
+        }
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside)
+            return () => document.removeEventListener('mousedown', handleClickOutside)
+        }
+    }, [isOpen])
+
+    // Generate CSS classes
+    const safeClassName = className || ''
+    const cssClasses = [
+        'dropdown2',
+        outlined && 'outlined',
+        disabled && 'disabled',
+        readOnly && 'readonly',
+        isOpen && 'open',
+        error || internalError ? 'error' : '',
+        multiple && 'multiple',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || label,
+        'aria-expanded': isOpen,
+        'aria-haspopup': 'listbox',
+        'aria-disabled': disabled,
+        'aria-readonly': readOnly,
+        'aria-required': required,
+        'aria-invalid': !!(error || internalError),
+        'aria-describedby': error || internalError || helperText ? `${id}-helper` : undefined
+    }
+
+    const displayValue = getDisplayValue()
+    const displayError = error || internalError
+    const displayHelperText = helperText && !displayError
+    const showClear = clearable && displayValue && !disabled && !readOnly
+
+    return (
+        <div ref={dropdownRef} className={cssClasses} {...restProps}>
+            <div
+                className="dropdown2-control"
+                onClick={handleToggle}
+                onKeyDown={handleKeyDown}
+                tabIndex={disabled ? -1 : 0}
+                {...ariaAttributes}
+            >
+                {searchable && isOpen ? (
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        value={searchTerm}
+                        placeholder={placeholder || 'Search...'}
+                        onChange={handleSearch}
+                        onKeyDown={handleKeyDown}
+                        className="dropdown2-search"
+                        disabled={disabled}
+                        autoFocus
+                    />
+                ) : (
+                    <span className={`dropdown2-value ${!displayValue ? 'placeholder' : ''}`}>
+                        {displayValue || placeholder || 'Select...'}
+                    </span>
+                )}
+
+                <div className="dropdown2-indicators">
+                    {showClear && (
+                        <Icon
+                            icon="close"
+                            size="small"
+                            clickable
+                            action={handleClear}
+                            className="dropdown2-clear"
+                            ariaLabel="Clear selection"
+                        />
+                    )}
+                    <Icon
+                        icon={isOpen ? 'expand_less' : 'expand_more'}
+                        size="small"
+                        className="dropdown2-arrow"
+                    />
+                </div>
+            </div>
+
+            {label && (
+                <label htmlFor={id} className={`dropdown2-label ${isOpen || displayValue ? 'active' : ''}`}>
+                    <Text>{label}</Text>
+                </label>
+            )}
+
+            {isOpen && (
+                <div
+                    className={`dropdown2-menu ${position}`}
+                    style={{ maxHeight }}
+                    role="listbox"
+                    aria-multiselectable={multiple}
+                >
+                    <ul ref={listRef}>
+                        {groupedOptions.map((group, groupIndex) => (
+                            <React.Fragment key={groupIndex}>
+                                {group.label && (
+                                    <li className="dropdown2-group-label" role="group">
+                                        <Text>{group.label}</Text>
+                                    </li>
+                                )}
+                                {group.options.map((option, optionIndex) => {
+                                    const flatIndex = groupedOptions
+                                        .slice(0, groupIndex)
+                                        .reduce((acc, g) => acc + g.options.length, 0) + optionIndex
+
+                                    const isSelected = multiple
+                                        ? Array.isArray(value) && value.includes(option.value)
+                                        : value === option.value
+
+                                    const isFocused = flatIndex === focusedIndex
+
+                                    return (
+                                        <li
+                                            key={option.value}
+                                            className={`dropdown2-option ${isSelected ? 'selected' : ''} ${isFocused ? 'focused' : ''}`}
+                                            onClick={() => handleSelect(option.value, option)}
+                                            role="option"
+                                            aria-selected={isSelected}
+                                        >
+                                            {multiple && (
+                                                <Icon
+                                                    icon={isSelected ? 'check_box' : 'check_box_outline_blank'}
+                                                    size="small"
+                                                    className="dropdown2-checkbox"
+                                                />
+                                            )}
+                                            {option.icon && (
+                                                <Icon
+                                                    icon={option.icon}
+                                                    size="small"
+                                                    className="dropdown2-option-icon"
+                                                />
+                                            )}
+                                            <span className="dropdown2-option-text">
+                                                {renderOption ? renderOption(option) : <Text>{option.label}</Text>}
+                                            </span>
+                                            {isSelected && !multiple && (
+                                                <Icon
+                                                    icon="check"
+                                                    size="small"
+                                                    className="dropdown2-check"
+                                                />
+                                            )}
+                                        </li>
+                                    )
+                                })}
+                            </React.Fragment>
+                        ))}
+                        {filteredOptions.length === 0 && (
+                            <li className="dropdown2-no-options">
+                                <Text>No options found</Text>
+                            </li>
+                        )}
+                    </ul>
+                </div>
+            )}
+
+            {/* Error/Helper text */}
+            {(displayError || displayHelperText) && (
+                <div
+                    id={`${id}-helper`}
+                    className={`dropdown2-helper ${displayError ? 'error' : 'helper'}`}
+                    role={displayError ? 'alert' : 'status'}
+                    aria-live={displayError ? 'assertive' : 'polite'}
+                >
+                    {displayError && <Icon icon="error" size="small" />}
+                    <Text>{displayError || helperText}</Text>
+                </div>
+            )}
+        </div>
+    )
+}
+
+// PropTypes for DropDown2
+DropDown2.propTypes = {
+    /** Unique identifier for the dropdown */
+    id: PropTypes.string.isRequired,
+    /** Array of option objects */
+    options: PropTypes.arrayOf(PropTypes.shape({
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        label: PropTypes.string.isRequired,
+        icon: PropTypes.string,
+        disabled: PropTypes.bool
+    })).isRequired,
+    /** Selected value(s) */
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+    ]),
+    /** Placeholder text */
+    placeholder: PropTypes.string,
+    /** Field label */
+    label: PropTypes.string,
+    /** Whether dropdown has outlined style */
+    outlined: PropTypes.bool,
+    /** Whether dropdown is disabled */
+    disabled: PropTypes.bool,
+    /** Whether dropdown is read-only */
+    readOnly: PropTypes.bool,
+    /** Whether dropdown is required */
+    required: PropTypes.bool,
+    /** Whether dropdown is searchable */
+    searchable: PropTypes.bool,
+    /** Whether dropdown is clearable */
+    clearable: PropTypes.bool,
+    /** Whether multiple selection is allowed */
+    multiple: PropTypes.bool,
+    /** Function or property name to group options by */
+    groupBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Custom filter function */
+    filterFunction: PropTypes.func,
+    /** Custom option renderer */
+    renderOption: PropTypes.func,
+    /** Custom value renderer */
+    renderValue: PropTypes.func,
+    /** Dropdown position */
+    position: PropTypes.oneOf(['top', 'bottom']),
+    /** Maximum height of dropdown menu */
+    maxHeight: PropTypes.string,
+    /** Error message */
+    error: PropTypes.string,
+    /** Helper text */
+    helperText: PropTypes.string,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** ARIA label */
+    ariaLabel: PropTypes.string,
+    /** Change handler */
+    onChange: PropTypes.func,
+    /** Open handler */
+    onOpen: PropTypes.func,
+    /** Close handler */
+    onClose: PropTypes.func,
+    /** Search handler */
+    onSearch: PropTypes.func
+}
+
+DropDown2.defaultProps = {
+    options: [],
+    outlined: false,
+    disabled: false,
+    readOnly: false,
+    required: false,
+    searchable: false,
+    clearable: false,
+    multiple: false,
+    position: 'bottom',
+    maxHeight: '200px',
+    className: ''
+}
+
+/**
+ * Enhanced DateRange component with improved validation and accessibility
+ */
+export const DateRange2 = (props) => {
+    const {
+        id,
+        label,
+        value,
+        outlined = false,
+        disabled = false,
+        readOnly = false,
+        required = false,
+        minDate,
+        maxDate,
+        error,
+        helperText,
+        className,
+        ariaLabel,
+        onChange,
+        onValidation,
+        ...restProps
+    } = props
+
+    const [form, setForm] = useState({ from: '', to: '' })
+    const [internalError, setInternalError] = useState('')
+    const [isValid, setIsValid] = useState(true)
+
+    // Validate required props
+    if (!id) {
+        console.warn('DateRange2 component: id prop is required')
+    }
+
+    // Initialize form from value
+    useEffect(() => {
+        if (value && typeof value === 'object') {
+            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])
+
+    // Validate date range
+    useEffect(() => {
+        let valid = true
+        let errorMessage = ''
+
+        if (required && (!form.from || !form.to)) {
+            valid = false
+            errorMessage = 'Both dates are required'
+        } else if (form.from && form.to) {
+            const fromDate = new Date(form.from)
+            const toDate = new Date(form.to)
+
+            if (fromDate > toDate) {
+                valid = false
+                errorMessage = 'From date must be before To date'
+            } else if (minDate && fromDate < new Date(minDate)) {
+                valid = false
+                errorMessage = `From date must be after ${minDate}`
+            } else if (maxDate && toDate > new Date(maxDate)) {
+                valid = false
+                errorMessage = `To date must be before ${maxDate}`
+            }
+        }
+
+        setIsValid(valid)
+        setInternalError(valid ? '' : errorMessage)
+
+        if (onValidation) {
+            onValidation(id, valid, errorMessage)
+        }
+    }, [form, required, minDate, maxDate, id]) // Removed onValidation to prevent infinite loops
+
+    // Handle form changes
+    useEffect(() => {
+        if (form.from && form.to && onChange) {
+            // 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, value]) // Added value to check for changes
+
+    // Handle field changes
+    const handleChange = useCallback((fieldId, fieldValue) => {
+        if (disabled || readOnly) return
+
+        setForm(prevForm => ({
+            ...prevForm,
+            [fieldId]: fieldValue
+        }))
+    }, [disabled, readOnly])
+
+    // Generate CSS classes
+    const safeClassName = className || ''
+    const cssClasses = [
+        'date-range2',
+        outlined && 'outlined',
+        disabled && 'disabled',
+        readOnly && 'readonly',
+        error || internalError ? 'error' : '',
+        !isValid && 'invalid',
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || label,
+        'aria-invalid': !isValid || !!(error || internalError),
+        'aria-required': required,
+        'aria-disabled': disabled,
+        'aria-readonly': readOnly,
+        'aria-describedby': error || internalError || helperText ? `${id}-helper` : undefined
+    }
+
+    const displayError = error || internalError
+    const displayHelperText = helperText && !displayError
+
+    return (
+        <div className={cssClasses} {...ariaAttributes} {...restProps}>
+            {label && (
+                <label className="date-range2-label">
+                    <Text>{label}</Text>
+                </label>
+            )}
+
+            <div className="date-range2-fields">
+                <TextField2
+                    id={`${id}-from`}
+                    type="date"
+                    label="From"
+                    value={form.from}
+                    outlined={outlined}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    required={required}
+                    min={minDate}
+                    max={form.to || maxDate}
+                    onChange={handleChange}
+                    className="date-range2-from"
+                />
+
+                <span className="date-range2-separator">
+                    <Text>to</Text>
+                </span>
+
+                <TextField2
+                    id={`${id}-to`}
+                    type="date"
+                    label="To"
+                    value={form.to}
+                    outlined={outlined}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    required={required}
+                    min={form.from || minDate}
+                    max={maxDate}
+                    onChange={handleChange}
+                    className="date-range2-to"
+                />
+            </div>
+
+            {/* Error/Helper text */}
+            {(displayError || displayHelperText) && (
+                <div
+                    id={`${id}-helper`}
+                    className={`date-range2-helper ${displayError ? 'error' : 'helper'}`}
+                    role={displayError ? 'alert' : 'status'}
+                    aria-live={displayError ? 'assertive' : 'polite'}
+                >
+                    {displayError && <Icon icon="error" size="small" />}
+                    <Text>{displayError || helperText}</Text>
+                </div>
+            )}
+        </div>
+    )
+}
+
+// PropTypes for DateRange2
+DateRange2.propTypes = {
+    /** Unique identifier for the date range */
+    id: PropTypes.string.isRequired,
+    /** Field label */
+    label: PropTypes.string,
+    /** Date range value object with from and to properties */
+    value: PropTypes.shape({
+        from: PropTypes.string,
+        to: PropTypes.string
+    }),
+    /** Whether fields have outlined style */
+    outlined: PropTypes.bool,
+    /** Whether fields are disabled */
+    disabled: PropTypes.bool,
+    /** Whether fields are read-only */
+    readOnly: PropTypes.bool,
+    /** Whether date range is required */
+    required: PropTypes.bool,
+    /** Minimum allowed date */
+    minDate: PropTypes.string,
+    /** Maximum allowed date */
+    maxDate: PropTypes.string,
+    /** Error message */
+    error: PropTypes.string,
+    /** Helper text */
+    helperText: PropTypes.string,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** ARIA label */
+    ariaLabel: PropTypes.string,
+    /** Change handler */
+    onChange: PropTypes.func,
+    /** Validation handler */
+    onValidation: PropTypes.func
+}
+
+DateRange2.defaultProps = {
+    outlined: false,
+    disabled: false,
+    readOnly: false,
+    required: false,
+    className: ''
+}
+
+export default TextField2