@adobe-commerce/aio-experience-kit 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -5,6 +5,123 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.4] - 2025-01-01
+
+### ✨ Added
+
+- **[DataTable - SearchBar](./src/components/DataTable/SearchBar/index.tsx)** - Comprehensive search functionality with filtering capabilities (#33)
+  - Added configurable search bar component integrated into DataTable header
+  - **Two Search Modes**:
+    - Button mode: Search triggered only on button click or Enter key press
+    - Type mode: Real-time search-as-you-type with configurable debouncing
+  - **Search Configuration** via `DataTableSearchConfig` interface with 14 properties:
+    - `enabled` - Enable/disable search bar
+    - `placeholder` - Customizable search input placeholder
+    - `searchButtonLabel` - Button label text (displayed with icon)
+    - `searchOnType` - Toggle between button and type modes
+    - `debounceMs` - Configurable debounce delay (default: 300ms)
+    - `minCharacters` - Minimum character validation
+    - `maxLength` - Maximum input length constraint
+    - `searchableColumns` - Column-specific filtering
+    - `showClearButton` - Clear button visibility
+    - `isSearching` - Loading state with progress indicator
+    - `caseSensitive` - Case sensitivity control
+    - `showResultsCount` - Results count display
+    - `ariaLabel` - Accessibility label customization
+  - **Keyboard Shortcuts**:
+    - Enter: Trigger search (bypasses debounce in type mode)
+    - Escape: Clear search (when clear button enabled)
+  - **Layout**: Right-aligned in header with `justifyContent="space-between"`, maintaining ActionsBuilder and ProgressCircle left alignment
+  - **Accessibility**: Full ARIA label support, keyboard navigation, screen reader compatible, high contrast mode support
+  - **Debouncing**: Smart debounce implementation with timer cleanup on unmount and clear operations
+  - **Use Cases**: Product catalog search, customer lookup, order management, inventory filtering, log/audit trail search, multi-column search
+  - **API Design**: Uncontrolled component with single `onSearch` callback for both button and type modes
+  - **Test Coverage**: 32 unit tests + 12 integration tests, 98.03% statement coverage, 100% function coverage
+  - **Documentation**: Comprehensive README with 5 usage examples, configuration table, keyboard shortcuts, and accessibility features
+
+- **[DataForm - FieldDependency](./src/components/DataForm/FormBuilder/types.ts)** - Conditional field visibility based on other field values (#32)
+  - Added `FieldDependency` interface with field reference and condition configuration
+  - Added `DependencyCondition` type union with 9 condition types:
+    - `equals` - Field value equals specified value
+    - `notEquals` - Field value does not equal specified value
+    - `in` - Field value exists in array of values
+    - `notIn` - Field value not in array of values
+    - `greaterThan` - Numeric field value greater than threshold
+    - `lessThan` - Numeric field value less than threshold
+    - `truthy` - Field value is truthy (for toggle/boolean fields)
+    - `falsy` - Field value is falsy
+    - `custom` - Custom validator function for complex conditions
+  - **Features**:
+    - Dynamic show/hide fields based on dependency conditions
+    - Automatic value clearing for hidden fields (optional via `clearValueOnHide`)
+    - Excluded hidden fields from form validation and submission
+    - Performance optimized with React memoization
+    - Multiple fields can depend on same source field
+  - **Use Cases**: Progressive disclosure, conditional required fields, multi-step forms, dynamic field groups
+  - **Test Coverage**: 18 comprehensive unit tests covering all condition types and edge cases
+  - **Code Coverage**: 98.85% for FormBuilder component
+  - **Documentation**: README updated with examples and configuration options
+
+- **[DataForm - ButtonContainer](./src/components/DataForm/ButtonContainer/index.tsx)** - Configurable form buttons with custom layout control (#34)
+  - Added `ButtonContainer` component for flexible form action button customization
+  - Added `FormButtonConfig` interface with comprehensive button configuration
+  - **Customizable Submit Button**:
+    - Custom label, icon, visibility, and ARIA labels
+    - Default label: "Save" with SaveFloppy icon
+  - **Customizable Back Button**:
+    - Custom label, icon, visibility, and ARIA labels
+    - Default label: "Back" with Back icon
+  - **Secondary Buttons**:
+    - Add multiple custom action buttons
+    - Support async handlers with independent loading states
+    - Button variants: primary, secondary, negative
+    - Custom labels, icons, and ARIA labels
+  - **Layout Configuration**:
+    - Button positioning: before or after form content
+    - Button alignment: start, center, end
+    - Button gap: small (8px), medium (16px), large (24px)
+  - **Features**:
+    - Independent loading states for each secondary button
+    - Automatic disabled state during form submission
+    - Full accessibility with ARIA labels and keyboard navigation
+    - 100% backward compatible (defaults match original behavior)
+  - **Test Coverage**: 37 comprehensive unit tests covering all customization scenarios
+  - **Documentation**: README updated with 10 usage examples for different configurations
+
+### 🐛 Fixed
+
+- **[DataForm - FieldDependency Test](./test/components/DataForm/FieldDependency.test.tsx)** - TypeScript type errors
+  - Added `FormBuilderComponents` import for proper type handling
+  - Used type assertion for intentional invalid test case testing
+  - Removed unused `@ts-expect-error` directive
+  - All 583 tests passing with proper TypeScript compilation
+
+## [1.0.3] - 2024-11-19
+
+### ✨ Added
+
+- **[FileUpload](./src/components/FileUpload/index.tsx)** - Imperative handle for programmatic control
+  - Added `FileUploadHandle` interface exposing `reset()` and `getFiles()` methods via React refs
+  - Enables parent components to imperatively clear selected files and reset component state
+  - Supports form reset workflows, multi-step wizards, and conditional clearing scenarios
+  - Maintains 100% backward compatibility (ref is optional)
+  - Full test coverage with comprehensive ref functionality testing
+
+- **[DataTable](./src/components/DataTable/index.tsx)** - Vertical scrolling for large datasets
+  - Added `maxHeight` prop to enable vertical scrolling when displaying large datasets
+  - Supports Spectrum dimension tokens (`size-6000`), CSS values (`500px`), and viewport units (`60vh`)
+  - Prevents excessive page scrolling and improves performance with many rows
+  - Maintains table header visibility while scrolling content
+  - Backward compatible (defaults to existing behavior without maxHeight)
+
+### 🔧 Changed
+
+- **[FieldBuilder](./src/components/DataForm/FieldBuilder/index.tsx)** - Improved Toggle field spacing and alignment
+  - Reduced gap between Switch label and Contextual Help from `size-100` (8px) to `size-25` (2px)
+  - Changed alignment from `start` to `center` for better vertical positioning
+  - Improved visual consistency with other form field types
+  - Enhanced user experience with tighter, more cohesive appearance
+
 ## [1.0.2] - 2024-11-15
 
 ### ✨ Added