@capillarytech/blaze-ui 5.21.0 → 5.22.0

package/CapTree/Status.md

@@ -1,48 +0,0 @@
-# Migration Status: CapTree
-
-**Last Updated**: 2026-02-05 09:45:06
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
-- [x] **Step 3**: Migration Prompt 3 (Unit tests)
-- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
-- [x] **Step 5**: Linting (ESLint)
-- [x] **Step 6**: Pre-build Validation
-- [x] **Step 7**: Build blaze-ui
-- [x] **Step 8**: Visual Testing
-- [ ] **Step 9**: CSS Analysis (if mismatches found)
-- [ ] **Step 9.5**: CSS Analysis Completed
-- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [x] **Step 11**: Create Pull Request
-
-## Deprecated Props Verification
-
-_No deprecated props verification results yet._
-
-**Note**: Step 2.5 is REQUIRED and enforced. 
-- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
-- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
-- Skip: If original component doesn't exist in cap-ui-library
-- All deprecated Ant Design props and prop changes must be documented before proceeding.
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-05 09:45:06
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-_No CSS fixes applied yet._
-
-## Notes
-
-_No notes yet._

package/CapTree/tests/STATUS.md

@@ -1,154 +0,0 @@
-# CapTree Test Implementation Status
-
-## Phase 0: Use Cases Extraction
-
-**Status**: ⚠️ **LIMITATION** - Google Sheets access unavailable
-
-**Note**: The MCP server `google_sheets` was not accessible during test creation. Tests were created based on:
-- Component implementation analysis (`index.tsx`, `types.ts`)
-- Storybook examples (`CapTree.stories.tsx`)
-- Ant Design Tree component documentation
-- Existing test patterns in the codebase
-
-## Phase 1: Use Cases Analysis
-
-### Use Cases CapTree DOES Fulfill ✅
-
-1. **Basic Tree Rendering**
-   - ✅ Renders tree structure from `treeData` prop
-   - ✅ Supports nested/hierarchical data
-   - ✅ Handles empty tree data
-
-2. **Selection Features**
-   - ✅ Single and multiple selection (`multiple` prop)
-   - ✅ Controlled and uncontrolled selection (`selectedKeys`)
-   - ✅ Default selected keys (`defaultSelectedKeys`)
-
-3. **Expansion Features**
-   - ✅ Expand/collapse nodes
-   - ✅ Default expanded keys (`defaultExpandedKeys`)
-   - ✅ Expand all (`defaultExpandAll`)
-   - ✅ Controlled expansion (`expandedKeys`)
-
-4. **Checkbox Features**
-   - ✅ Checkable nodes (`checkable` prop)
-   - ✅ Controlled checked keys (`checkedKeys`)
-   - ✅ Default checked keys (`defaultCheckedKeys`)
-   - ✅ Half-checked state support
-
-5. **Visual Customization**
-   - ✅ Show/hide lines (`showLine`)
-   - ✅ Show/hide icons (`showIcon`)
-   - ✅ Custom icons per node
-   - ✅ Custom className
-   - ✅ Block node layout (`blockNode`)
-
-6. **Interaction Handlers**
-   - ✅ `onSelect` callback
-   - ✅ `onExpand` callback
-   - ✅ `onCheck` callback
-   - ✅ `onRightClick` callback
-   - ✅ `onDoubleClick` callback
-   - ✅ `loadData` for async loading
-
-7. **Accessibility**
-   - ✅ Keyboard navigation (Arrow keys, Enter, Space)
-   - ✅ ARIA attributes support
-   - ✅ Tree role
-
-8. **Backward Compatibility**
-   - ✅ Deprecated `TreeNode` children pattern (with warnings)
-   - ✅ All Ant Design Tree props pass-through
-
-### Use Cases CapTree DOES NOT Fulfill ❌
-
-**Note**: These may be intentional design decisions since CapTree is a thin wrapper around Ant Design Tree.
-
-1. **Built-in Search Functionality**
-   - ❌ No search/filter capability (unlike `CapTreeView` and `CapPopoverTree`)
-   - **Workaround**: Implement search externally and filter `treeData`
-
-2. **Loading States**
-   - ❌ No built-in loading indicator
-   - **Workaround**: Wrap component with `CapSpin` or show loading externally
-
-3. **Empty State Messages**
-   - ❌ No custom empty state message
-   - **Workaround**: Conditionally render message when `treeData` is empty
-
-4. **Select All Functionality**
-   - ❌ No built-in "select all" feature (unlike `CapMultiSelectWithTree`)
-   - **Workaround**: Implement externally by managing `checkedKeys`
-
-5. **Node Counter/Statistics**
-   - ❌ No built-in node counting (unlike `CapTreeView`)
-   - **Workaround**: Calculate externally from `treeData`
-
-6. **Custom Node Rendering**
-   - ❌ Limited to Ant Design's default node rendering
-   - **Workaround**: Use `title` prop with React nodes or `titleRender` prop
-
-7. **Drag and Drop**
-   - ❌ No built-in drag-and-drop support
-   - **Workaround**: Use Ant Design's `draggable` prop (if supported in v6)
-
-8. **Virtual Scrolling**
-   - ❌ No virtual scrolling for large trees
-   - **Workaround**: Use Ant Design's virtual scrolling features (if available)
-
-9. **Search Highlighting**
-   - ❌ No built-in search result highlighting
-   - **Workaround**: Implement externally by modifying node titles
-
-10. **Bulk Operations**
-    - ❌ No built-in bulk select/expand/collapse
-    - **Workaround**: Implement externally by managing state
-
-## Phase 2: Test Implementation
-
-**Status**: ✅ **COMPLETE**
-
-### Test Coverage
-
-- ✅ Default rendering and initialization (6 tests)
-- ✅ Prop variations and functional impact (10 tests)
-- ✅ Controlled state management (4 tests)
-- ✅ User interactions (6 tests)
-- ✅ Callbacks and event handlers (5 tests)
-- ✅ Edge cases (7 tests)
-- ✅ Accessibility (6 tests)
-- ✅ Backward compatibility (5 tests)
-- ✅ Data flow and state management (4 tests)
-- ✅ Conditional rendering logic (6 tests)
-
-**Total**: ~59 test cases
-
-### Test Files Created
-
-1. `CapTree.test.tsx` - Comprehensive test suite
-2. `CapTree.mockData.ts` - Reusable mock data structures (converted from .tsx to .ts)
-
-### Test Patterns Used
-
-- ✅ `it.each` for repetitive prop variations
-- ✅ Reusable `renderWithProps` helper function
-- ✅ Mock data separated into dedicated file
-- ✅ Focus on functional behavior and user interactions
-- ✅ No styling/CSS class testing (only functional behavior)
-- ✅ No implementation detail testing
-- ✅ DRY principles with helper functions
-- ✅ Comprehensive edge case coverage
-
-## Recommendations
-
-1. **For Search Functionality**: Consider creating `CapTreeWithSearch` wrapper component
-2. **For Loading States**: Document wrapping pattern with `CapSpin`
-3. **For Empty States**: Document conditional rendering pattern
-4. **For Advanced Features**: Consider if these belong in CapTree or separate components
-
-## Next Steps
-
-1. Run test suite: `npm test -- components/CapTree/tests/CapTree.test.tsx`
-2. Check coverage: `npm test -- --coverage components/CapTree`
-3. Review and update use cases based on Google Sheets data (when accessible)
-4. Add integration tests if needed

package/CapTreeSelect/README.md

@@ -1,217 +0,0 @@
-# CapTreeSelect Migration Guide
-
-## Summary
-
-CapTreeSelect has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
-
-- Converted from JavaScript to TypeScript
-- Converted from styled-components to SCSS modules
-- Migrated to Ant Design v6 APIs
-- Added backward compatibility for deprecated props
-- Added TypeScript interfaces for props
-- Maintained backward compatibility with the existing API
-
-## Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-The component maintains backward compatibility with deprecated props. However, deprecated props will show console warnings in development mode and should be migrated to the new API.
-
-## Prop Changes
-
-### New Props (v6 API)
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` | `boolean` | `undefined` | Whether the dropdown is open (Ant Design TreeSelect v6 API) |
-| `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when dropdown open state changes (Ant Design TreeSelect v6 API) |
-| `popupClassName` | `string` | `undefined` | Custom class name for the popup dropdown (Ant Design TreeSelect v6 API) |
-
-### Deprecated Props (Still Supported)
-
-The following props are deprecated Ant Design TreeSelect component props but still supported for backward compatibility. They will show console warnings in development mode:
-
-| Deprecated Prop | Replacement | Ant Design Component | Notes |
-|----------------|-------------|---------------------|-------|
-| `visible` | `open` | TreeSelect | Use `open` for controlled state (Ant Design v6 API) |
-| `onVisibleChange` | `onOpenChange` | TreeSelect | Use `onOpenChange` for controlled state callbacks (Ant Design v6 API) |
-| `dropdownClassName` | `popupClassName` | TreeSelect | Use `popupClassName` for popup dropdown styling (Ant Design v6 API) |
-
-**Note**: These deprecated props are Ant Design TreeSelect component prop changes from v5 to v6. They will be removed in the next major version. Please migrate to the new prop names.
-
-**Reference**: See [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6) for details on Ant Design component prop changes.
-
-### Other Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `treeData` | `TreeSelectProps['treeData']` | **Required** | Tree data for TreeSelect component |
-| `className` | `string` | `undefined` | Additional CSS class name |
-| `headerTitle` | `string` | `undefined` | Optional header title displayed above the TreeSelect |
-| `headerDescription` | `string` | `undefined` | Optional header description displayed below the title |
-| `treeSelectSideLabel` | `string` | `undefined` | Optional label displayed to the left of the TreeSelect |
-| `disabledTooltip` | `string` | `undefined` | Optional tooltip text shown when TreeSelect is disabled |
-| `infoNote` | `string` | `undefined` | Optional info note message displayed above the TreeSelect |
-| `infoNoteWidth` | `string` | `'60%'` | Optional width for the info note |
-| `...rest` | `TreeSelectProps` | - | All other TreeSelect props from Ant Design v6 |
-
-## API Changes
-
-### Ant Design TreeSelect Component Prop Changes
-
-CapTreeSelect wraps Ant Design's TreeSelect component. The following Ant Design TreeSelect props have been deprecated in v6:
-
-#### Controlled Open State (Ant Design TreeSelect v6 API)
-
-**Ant Design TreeSelect prop change**: `visible` → `open`, `onVisibleChange` → `onOpenChange`
-
-```tsx
-// New Ant Design v6 API (recommended)
-const [open, setOpen] = useState(false);
-
-<CapTreeSelect
-  treeData={treeData}
-  open={open}
-  onOpenChange={setOpen}
-/>
-
-// Old Ant Design v5 API (deprecated, still works)
-const [visible, setVisible] = useState(false);
-
-<CapTreeSelect
-  treeData={treeData}
-  visible={visible}
-  onVisibleChange={setVisible}
-/>
-```
-
-#### Popup Class Name (Ant Design TreeSelect v6 API)
-
-**Ant Design TreeSelect prop change**: `dropdownClassName` → `popupClassName`
-
-```tsx
-// New Ant Design v6 API (recommended)
-<CapTreeSelect
-  treeData={treeData}
-  popupClassName="custom-popup-class"
-/>
-
-// Old Ant Design v5 API (deprecated, still works)
-<CapTreeSelect
-  treeData={treeData}
-  dropdownClassName="custom-popup-class"
-/>
-```
-
-## Behavioral Changes
-
-### Development Warnings
-
-When using deprecated Ant Design TreeSelect props in development mode, console warnings will be displayed:
-
-```
-[CapTreeSelect] "dropdownClassName" prop is deprecated. Use "popupClassName" instead.
-[CapTreeSelect] "visible" prop is deprecated. Use "open" instead.
-[CapTreeSelect] "onVisibleChange" prop is deprecated. Use "onOpenChange" instead.
-```
-
-**Note**: These warnings indicate that deprecated Ant Design TreeSelect component props are being used. The component maintains backward compatibility by mapping these deprecated props to their Ant Design v6 equivalents internally.
-
-### Width and placeholder (backward compatibility with cap-ui-library)
-
-**Why blaze-ui shows the placeholder with fitted width automatically**
-
-- **blaze-ui** always applies a full-width class (`.tree-select-full-width`) to the underlying TreeSelect, so the trigger fills the row and the placeholder is visible without extra props.
-- **cap-ui-library** only sets `style={{ width: '100%' }}` on the TreeSelect when `disabledTooltip` is set. When `disabledTooltip` is not set, the TreeSelect gets no width from the wrapper, so in a flex/narrow container the trigger can collapse and the placeholder can be clipped.
-
-So in blaze-ui the same usage “just works”; in cap-ui-library you need either a full-width container or an explicit width (e.g. via `style`) for the placeholder to show reliably.
-
-**What to follow for backward compatibility**
-
-- **When you need the placeholder to be visible and the select to use full width** (e.g. in visual tests or shared layouts), pass **`style={{ width: '100%' }}`** (or use a full-width wrapper). That works in both cap-ui-library and blaze-ui.
-- In **cap-ui-library** this is required (unless you use `disabledTooltip` or a full-width wrapper). In **blaze-ui** it is optional but recommended for:
-  - Consistent behavior when swapping between cap-ui-library and blaze-ui.
-  - Predictable layout in narrow/flex containers (e.g. test harness with `width: fit-content` and a `min-width` on the container).
-
-So: **use `style={{ width: '100%' }}` (or an equivalent full-width wrapper) whenever you rely on the placeholder and full-width layout**; that keeps behavior aligned with cap-ui-library and works in blaze-ui as well.
-
-## Migration Steps
-
-### 1. Update Import
-
-```tsx
-// Before (cap-ui-library)
-import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
-
-// After (blaze-ui)
-import { CapTreeSelect } from '@capillarytech/blaze-ui';
-// or
-import CapTreeSelect from '@capillarytech/blaze-ui/CapTreeSelect';
-```
-
-### 2. Update Ant Design TreeSelect Controlled State Props
-
-**Ant Design TreeSelect prop change**: `visible` → `open`, `onVisibleChange` → `onOpenChange`
-
-```tsx
-// Before (deprecated Ant Design v5 API)
-const [visible, setVisible] = useState(false);
-
-<CapTreeSelect
-  treeData={treeData}
-  visible={visible}
-  onVisibleChange={setVisible}
-/>
-
-// After (Ant Design v6 API)
-const [open, setOpen] = useState(false);
-
-<CapTreeSelect
-  treeData={treeData}
-  open={open}
-  onOpenChange={setOpen}
-/>
-```
-
-### 3. Update Ant Design TreeSelect Popup Class Name
-
-**Ant Design TreeSelect prop change**: `dropdownClassName` → `popupClassName`
-
-```tsx
-// Before (deprecated Ant Design v5 API)
-<CapTreeSelect
-  treeData={treeData}
-  dropdownClassName="custom-popup-class"
-/>
-
-// After (Ant Design v6 API)
-<CapTreeSelect
-  treeData={treeData}
-  popupClassName="custom-popup-class"
-/>
-```
-
-## Code Improvements
-
-1. **Removed styled-components dependency**: Replaced with SCSS module `cap-tree-select-v2-row`
-2. **Using deprecation warning utility**: Now uses `logDeprecationWarning` utility for consistent deprecation warnings
-3. **Improved backward compatibility**: Deprecated props are mapped using nullish coalescing (`??`) for cleaner code
-4. **TypeScript support**: Full TypeScript type definitions with proper Ant Design v6 types
-
-## What Stayed the Same
-
-- All component props and behavior
-- DOM structure and component hierarchy
-- Conditional rendering logic
-- API surface area (backward compatible)
-- Support for headerTitle, headerDescription, treeSelectSideLabel, disabledTooltip, and infoNote props
-
-## What Changed
-
-- **Removed**: `styled-components` dependency
-- **Removed**: `PropTypes` (replaced with TypeScript types)
-- **Removed**: `defaultProps` (replaced with default parameters)
-- **Updated**: Ant Design imports from `antd` to `antd-v5`
-- **Added**: TypeScript type definitions in `types.ts`
-- **Added**: SCSS module for styling
-- **Added**: Backward compatibility for deprecated props

package/CapTreeSelect/Status.md

@@ -1,52 +0,0 @@
-# Migration Status: CapTreeSelect
-
-**Last Updated**: 2026-02-20 14:33:28
-
-## Migration Steps
-
-- [x] **Step 0**: Setup branch and remote tracking
-- [x] **Step 1**: Migration Prompt 1 (Main migration)
-- [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
-- [x] **Step 2**: Migration Prompt 2 (Storybook support)
-- [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
-- [x] **Step 3**: Migration Prompt 3 (Unit tests)
-- [x] **Step 4**: Migration Prompt 4 (Visual test cases)
-- [x] **Step 5**: Linting (ESLint)
-- [x] **Step 6**: Pre-build Validation
-- [x] **Step 7**: Build blaze-ui
-- [x] **Step 8**: Visual Testing
-- [x] **Step 9**: CSS Analysis (if mismatches found)
-- [x] **Step 9.5**: CSS Analysis Completed
-- [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
-- [x] **Step 11**: Create Pull Request
-
-## Deprecated Props Verification
-
-_No deprecated props verification results yet._
-
-**Note**: Step 2.5 is REQUIRED and enforced. 
-- Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
-- Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
-- Skip: If original component doesn't exist in cap-ui-library
-- All deprecated Ant Design props and prop changes must be documented before proceeding.
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-20 14:33:28
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-02-07 00:31:17
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapTreeSelect/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapTruncateList/README.md

@@ -1,13 +0,0 @@
-# CapTruncateList
-
-Component for displaying a truncated list of items with a "more" indicator. Built on Ant Design v6 with Cap UI styling.
-
-### No Breaking Changes
-
-The component maintains **100% backward compatibility** with `cap-ui-library` v8.x. All existing code will continue to work without modifications.
-
-## Notes
-
-- **Translations**: The component now uses `InjectIntl` for translations instead of LocalHoc
-- **SCSS**: Even though component used classnames, the style file is missing (assumption is that consumer is injecting styles directly).
-

package/CapUnifiedSelect/README.md

@@ -1,40 +0,0 @@
-# CapUnifiedSelect
-
-Unified select component supporting single select, multi-select, tree select, and multi-tree select. Built on Ant Design’s TreeSelect (antd-v5) with custom popup, search, confirm flow, and optional list virtualization.
-
----
-
-## Virtualization
-
-List virtualization is implemented **without** third-party libraries like react-virtuoso. It is provided entirely by **Ant Design’s TreeSelect** (antd-v5). TreeSelect uses `rc-tree-select`, which in turn uses **rc-virtual-list** (from react-component) for virtual scrolling. No custom virtualization logic lives in this component.
-
-### How rc-virtual-list works
-
-- Only items in the visible viewport (plus a small overscan) are rendered in the DOM. As the user scrolls, the set of mounted items is updated.
-- The scrollable container has a fixed height (`listHeight`). Total content height is computed as `(number of items) × listItemHeight`.
-- A transform or spacer is used so that non-visible items still contribute to scroll height and scroll position stays correct.
-
-### Configuration
-
-| Prop | Type | Default | Description |
-|------|------|--------|-------------|
-| `enableVirtualization` | `boolean` | `false` | When **false** (default), TreeSelect uses antd’s built-in virtual list. When **true**, the virtual list is disabled and the full list is rendered (e.g. for custom popup width or compatibility). |
-| `virtualRowHeight` | `number` | `32` | Fixed height per option in px. Used by the virtual list to compute total height and which slice of items to render. Only relevant when the virtual list is enabled. |
-| `listHeight` | `number` | `256` | Viewport height in px for the dropdown list. Passed through to TreeSelect / rc-virtual-list. |
-
-In code, these are wired as:
-
-- `virtual={!enableVirtualization}` — so default behaviour is virtual list **on**.
-- `listHeight` and `listItemHeight={virtualRowHeight}` are passed through to TreeSelect, which forwards them to rc-virtual-list.
-
-### Infinite scroll (onPopupScroll)
-
-For “load more on scroll”, the scrollable DOM node must be found so listeners can attach. **`getScrollContainer()`** in `utils.ts` does this by:
-
-1. Finding the visible Ant Design select dropdown (`.ant-select-dropdown`).
-2. Looking for a scrollable container in this order:
-   - `.ant-select-tree-list-holder` (when the virtual list is **off**),
-   - `.rc-virtual-list-holder` (when the virtual list is **on**),
-   - or the dropdown root if neither exists.
-
-So both virtual and non-virtual dropdowns are supported for `onPopupScroll` and infinite loading.