@capillarytech/blaze-ui 5.20.0 → 5.22.0

package/CapCustomCheckboxList/tests/USE_CASES_ANALYSIS.md

@@ -1,174 +0,0 @@
-# CapCustomCheckboxList - Use Cases Analysis
-
-## Phase 1: Use Cases NOT Fulfilled by Component
-
-This document identifies potential use cases that the `CapCustomCheckboxList` component may not currently fulfill, based on common checkbox list patterns and the component's current implementation.
-
-### 1. Loading States
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Display loading skeleton/spinner while checkbox items are being fetched
-- **Current Behavior**: Component renders immediately with provided `paneList`
-- **Gap**: No `loading` prop or loading state handling
-- **Workaround**: Parent component can conditionally render component or show loading UI separately
-
-### 2. Empty State Handling
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Display custom message when `paneList` is empty
-- **Current Behavior**: Component renders nothing when `paneList` is empty (no visual feedback)
-- **Gap**: No `emptyText` or `emptyRender` prop
-- **Workaround**: Parent component can check `paneList.length` and render empty state separately
-
-### 3. Maximum Selection Limit
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Limit the number of items that can be selected (e.g., "Select up to 3 options")
-- **Current Behavior**: All checkboxes can be selected without limit
-- **Gap**: No `maxSelection` prop or validation
-- **Workaround**: Parent component can implement validation in `onChange` handler
-
-### 4. Minimum Selection Requirement
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Require at least N items to be selected (e.g., "Select at least 2 options")
-- **Current Behavior**: No minimum selection enforcement
-- **Gap**: No `minSelection` prop or validation
-- **Workaround**: Parent component can implement validation in `onChange` handler
-
-### 5. Select All / Deselect All
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Provide a "Select All" checkbox to select/deselect all items at once
-- **Current Behavior**: Users must click each checkbox individually
-- **Gap**: No built-in select all functionality
-- **Workaround**: Parent component can add a separate checkbox and manage state
-
-### 6. Group-Level Error Messages
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Display error message at the group level (e.g., "Please select at least one option")
-- **Current Behavior**: Only individual items can have error messages via `errorMessage` prop
-- **Gap**: No `errorMessage` prop at component level
-- **Workaround**: Parent component can render error message above/below component
-
-### 7. Custom Validation
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Custom validation logic (e.g., certain combinations are invalid)
-- **Current Behavior**: No validation beyond individual item `errorMessage`
-- **Gap**: No `validator` or `onValidate` callback prop
-- **Workaround**: Parent component can implement validation logic
-
-### 8. Virtualization for Large Lists
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Efficiently render hundreds or thousands of checkbox items
-- **Current Behavior**: Renders all items in `paneList` (performance may degrade with large lists)
-- **Gap**: No virtualization or pagination support
-- **Workaround**: Parent component can implement pagination or virtual scrolling wrapper
-
-### 9. Filtering/Search Functionality
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Filter checkbox items by search term
-- **Current Behavior**: All items in `paneList` are always rendered
-- **Gap**: No built-in filtering or search
-- **Workaround**: Parent component can filter `paneList` before passing to component
-
-### 10. Responsive Layout
-**Status**: ⚠️ LIMITED SUPPORT
-- **Use Case**: Adapt layout for mobile/tablet screens (e.g., stack vertically on small screens)
-- **Current Behavior**: Fixed horizontal flex layout (`display: flex`)
-- **Gap**: No responsive breakpoints or layout variations
-- **Workaround**: CSS media queries can override styles, but component doesn't provide responsive props
-
-### 11. Custom Item Rendering
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Customize rendering of individual items (e.g., add buttons, badges, custom layouts)
-- **Current Behavior**: Fixed structure: icon container + checkbox with title + optional inductive text
-- **Gap**: No `renderItem` prop or slot-based customization
-- **Workaround**: Parent component can transform `paneList` data, but structure is fixed
-
-### 12. Item Actions (Delete, Edit, etc.)
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Add action buttons to each checkbox item (e.g., delete, edit, info)
-- **Current Behavior**: No support for additional UI elements per item
-- **Gap**: No `actions` prop or action slot
-- **Workaround**: Not possible with current structure
-
-### 13. Tooltips on Items
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Show tooltips when hovering over checkbox items
-- **Current Behavior**: No built-in tooltip support
-- **Gap**: No `tooltip` prop on `PaneListItem`
-- **Workaround**: Parent component can wrap items, but tooltip won't be part of component structure
-
-### 14. Accessibility Enhancements
-**Status**: ⚠️ PARTIAL SUPPORT
-- **Use Case**: Enhanced ARIA attributes (e.g., `aria-label` for group, `aria-describedby` for descriptions)
-- **Current Behavior**: Basic checkbox roles and labels via title
-- **Gap**: Missing `aria-label` on Checkbox.Group, no `aria-describedby` for inductive text
-- **Workaround**: Can be added via `...others` props, but not built-in
-
-### 15. Loading Skeleton for Items
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Show skeleton loaders while individual items are loading
-- **Current Behavior**: Items render immediately or not at all
-- **Gap**: No skeleton/placeholder support
-- **Workaround**: Parent component can render skeleton UI separately
-
-### 16. Item Grouping/Categorization
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Group items into categories with headers (e.g., "Premium Features", "Basic Features")
-- **Current Behavior**: Flat list of items
-- **Gap**: No grouping or categorization support
-- **Workaround**: Not possible with current structure
-
-### 17. Drag and Drop Reordering
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Allow users to reorder checkbox items via drag and drop
-- **Current Behavior**: Items render in order of `paneList` array
-- **Gap**: No drag and drop functionality
-- **Workaround**: Parent component can implement drag and drop and reorder `paneList`
-
-### 18. Checkbox State Persistence
-**Status**: ⚠️ REQUIRES PARENT
-- **Use Case**: Persist selected state across page reloads
-- **Current Behavior**: State managed by parent component (controlled) or Ant Design (uncontrolled)
-- **Gap**: No built-in persistence (localStorage, sessionStorage)
-- **Workaround**: Parent component can implement persistence logic
-
-### 19. Keyboard Shortcuts
-**Status**: ⚠️ PARTIAL SUPPORT
-- **Use Case**: Keyboard shortcuts (e.g., Ctrl+A to select all, Arrow keys to navigate)
-- **Current Behavior**: Basic keyboard navigation (Tab, Space) via native checkbox behavior
-- **Gap**: No custom keyboard shortcuts
-- **Workaround**: Not possible without component modification
-
-### 20. Item Count Display
-**Status**: ❌ NOT SUPPORTED
-- **Use Case**: Display "X of Y selected" counter
-- **Current Behavior**: No built-in counter
-- **Gap**: No `showCount` prop or count display
-- **Workaround**: Parent component can calculate and display count separately
-
-## Summary
-
-**Total Use Cases Analyzed**: 20
-- **Not Supported**: 16
-- **Partially Supported**: 3
-- **Requires Parent Implementation**: 1
-
-## Recommendations
-
-The component is well-suited for:
-- ✅ Simple checkbox lists with icons and descriptions
-- ✅ Controlled/uncontrolled selection state
-- ✅ Basic accessibility needs
-- ✅ Horizontal layout requirements
-
-The component may need enhancement or wrapper components for:
-- ❌ Complex validation requirements
-- ❌ Large datasets (virtualization)
-- ❌ Advanced interactions (select all, filtering)
-- ❌ Custom item rendering
-- ❌ Responsive layouts
-
-## Notes
-
-- This analysis is based on the component's current implementation as of the test creation date
-- Some "gaps" may be intentional design decisions to keep the component simple and focused
-- Workarounds are possible for most use cases, but may require additional code in parent components
-- Future enhancements could address these gaps if they become common requirements

package/CapCustomList/README.md

@@ -1,117 +0,0 @@
-# CapCustomList
-
-A customizable list component that displays hierarchical category data with support for subcategories and loading states.
-
-## Migration from cap-ui-library
-
-### Summary of Changes
-
-The CapCustomList component has been migrated from cap-ui-library to blaze-ui with the following updates:
-
-- **TypeScript Migration**: Converted from JavaScript to TypeScript with proper type definitions
-- **SCSS Modules**: Converted from styled-components to SCSS modules
-- **Functional Component**: Already a functional component, maintained with React hooks
-- **Code Quality**: Improved code formatting and consistency
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | - | Main title displayed at the top of the list |
-| `list` | `ListItem[]` | - | Array of list items containing category data (required) |
-| `className` | `string` | - | Custom CSS class name |
-| `loader` | `boolean` | - | Loading state indicator |
-| `contentId` | `string` | - | Content identifier used for fetching list data |
-| `getList` | `(contentId: string, type: string) => void` | - | Callback function to fetch list data (required) |
-| `type` | `string` | - | Type identifier used for fetching list data |
-
-### Types
-
-```typescript
-interface ListItem {
-  levelName: string;
-  subCategory: string[];
-  levelValueCount: number | string;
-}
-
-interface CapCustomListProps {
-  title?: string;
-  list: ListItem[];
-  className?: string;
-  loader?: boolean;
-  contentId?: string;
-  getList: (contentId: string, type: string) => void;
-  type?: string;
-}
-```
-
-### Breaking Changes
-
-**None** - The component maintains backward compatibility with cap-ui-library v8.x API.
-
-### Deprecated Props
-
-**None** - CapCustomList does not directly use any Ant Design components, and therefore has no deprecated Ant Design props.
-
-#### Ant Design Component Usage
-
-CapCustomList uses the following Cap components internally, which wrap Ant Design components:
-
-- **CapSpin** - Wraps Ant Design `Spin` component
-  - CapCustomList passes: `spinning` prop (not deprecated)
-  - No deprecated Ant Design props are used
-
-- **CapButton** - Wraps Ant Design `Button` component  
-  - CapCustomList passes: `type="flat"` and `onClick` (not deprecated)
-  - No deprecated Ant Design props are used
-
-- **CapHeader** - No direct Ant Design dependency
-- **CapHeading** - No direct Ant Design dependency
-- **CapIcon** - Uses `@ant-design-v5/icons` but no deprecated props
-
-#### Verification Results
-
-✅ **No deprecated Ant Design props detected**
-
-The component was verified against the Ant Design v6 migration guide (`ANTD_V6_MIGRATION.md`) and the following deprecated APIs were confirmed as **NOT used**:
-
-- `visible` → `open` (not applicable)
-- `overlay` → `menu` (not applicable)
-- `overlayClassName` → `classNames.root` (not applicable)
-- `destroyTooltipOnHide` → `destroyOnHidden` (not applicable)
-- `message` → `title` (not applicable)
-- `TabPane` children → `items` prop (not applicable)
-- `tabPosition` → `tabPlacement` (not applicable)
-
-**Note**: Since CapCustomList does not directly consume Ant Design components, there are no Ant Design prop changes to document. All Ant Design components are accessed through Cap component wrappers, which handle Ant Design v6 compatibility internally.
-
-### Usage Example
-
-```tsx
-import CapCustomList from '@capillarytech/blaze-ui/components/CapCustomList';
-
-function MyComponent() {
-  const handleGetList = (contentId: string, type: string) => {
-    // Fetch list data
-  };
-
-  return (
-    <CapCustomList
-      title="Categories"
-      list={categoryList}
-      loader={isLoading}
-      contentId="123"
-      getList={handleGetList}
-      type="category"
-    />
-  );
-}
-```
-
-### Related Components
-
-- CapButton - Used for category selection buttons
-- CapHeader - Used for displaying category headers
-- CapHeading - Used for titles and labels
-- CapIcon - Used for navigation icons
-- CapSpin - Used for loading state

package/CapCustomList/Status.md

@@ -1,77 +0,0 @@
-# Migration Status: CapCustomList
-
-**Last Updated**: 2026-02-06 01:45:51
-
-## 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
-
-✅ **COMPLETE** - Verified on 2026-02-01
-
-### Summary
-**No deprecated Ant Design props detected.** CapCustomList does not directly use any Ant Design components.
-
-### Ant Design Components Used Indirectly
-CapCustomList uses Cap components that internally wrap Ant Design components:
-- **CapSpin** - Wraps Ant Design `Spin` component
-  - Props passed: `spinning` (not deprecated)
-- **CapButton** - Wraps Ant Design `Button` component
-  - Props passed: `type="flat"`, `onClick` (not deprecated)
-- **CapIcon** - Uses `@ant-design-v5/icons`
-  - No deprecated props used
-
-### Deprecated APIs Verified as NOT Used
-✅ `visible` → `open`  
-✅ `overlay` → `menu`  
-✅ `overlayClassName` → `classNames.root`  
-✅ `destroyTooltipOnHide` → `destroyOnHidden`  
-✅ `message` → `title`  
-✅ `TabPane` children → `items` prop  
-✅ `tabPosition` → `tabPlacement`
-
-### Documentation
-- ✅ README.md created with "Deprecated Props" section
-- ✅ All Ant Design component usage documented
-- ✅ Verification results documented
-
-**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
-- All deprecated Ant Design props and prop changes must be documented before proceeding.
-
-## Visual Testing Results
-
-**Last Test**: 2026-02-06 01:45:51
-**Maximum Mismatch**: 0%
-
-### Mismatched Variants:
-- 
-
-
-## CSS Fixes Applied
-
-**Date**: 2026-02-01 02:24:59
-**Summary**: CSS fixes applied based on visual testing analysis.
-
-_See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapCustomList/css-fix-analysis.md`_
-
-
-## Notes
-
-_No notes yet._

package/CapCustomList/tests/USE_CASES_ANALYSIS.md

@@ -1,124 +0,0 @@
-# CapCustomList - Use Cases Analysis
-
-## Phase 0: Use Cases from Google Sheets
-
-**Note**: Google Sheets MCP server was not accessible during test implementation. Use cases were extracted from component analysis, existing test patterns, and USE_CASES_ANALYSIS.md.
-
-### Identified Use Cases (from Component Analysis):
-
-1. **Basic Rendering**
-   - Render list of categories with titles and counts
-   - Display subcategories when category is selected
-   - Show loading state during data fetch
-
-2. **User Interactions**
-   - Click category to view subcategories
-   - Navigate back from subcategory view
-   - Keyboard navigation support
-
-3. **Data Management**
-   - Fetch list data via `getList` callback
-   - Calculate total category count
-   - Handle empty states
-
-4. **State Management**
-   - Maintain main list vs subcategory view state
-   - Update count when list changes
-   - Handle prop changes (loader, contentId, type)
-
-5. **Edge Cases**
-   - Empty lists
-   - Missing optional props
-   - Empty subcategory arrays
-   - String vs number levelValueCount
-   - Missing levelName (key fallback)
-
-## Phase 1: Use Cases NOT Fulfilled by Component
-
-Based on component analysis, the following use cases are **NOT** currently supported:
-
-### 1. **useEffect Dependency Issue**
-- **Issue**: The `useEffect` hook that calls `getList` only depends on `loader`, but uses `contentId` and `type` inside the callback.
-- **Impact**: If `contentId` or `type` props change, `getList` won't be called with the new values.
-- **Use Case**: Dynamic content loading based on changing contentId/type.
-
-### 2. **Error State Handling**
-- **Issue**: No error state prop or error display mechanism.
-- **Impact**: If `getList` fails or returns an error, users have no visual feedback.
-- **Use Case**: Display error messages when data fetching fails.
-
-### 3. **Empty State Messaging**
-- **Issue**: When `list` is empty, component renders nothing without explanation.
-- **Impact**: Users don't know if list is empty due to no data, loading, or error.
-- **Use Case**: Show "No categories available" or similar message.
-
-### 4. **Category Selection Callback**
-- **Issue**: No `onCategorySelect` or similar callback prop.
-- **Impact**: Parent components can't react to category selection.
-- **Use Case**: Track analytics, update URL, or trigger side effects on selection.
-
-### 5. **Subcategory Selection Callback**
-- **Issue**: No `onSubcategorySelect` callback prop.
-- **Impact**: Can't handle subcategory clicks for navigation or actions.
-- **Use Case**: Navigate to detail pages, open modals, or perform actions.
-
-### 6. **Programmatic Navigation**
-- **Issue**: No way to set initial subcategory view or navigate programmatically.
-- **Impact**: Can't deep-link to specific subcategory views.
-- **Use Case**: URL-based routing, browser back/forward navigation.
-
-### 7. **Loading State Per Category**
-- **Issue**: Only global `loader` prop, no per-category loading states.
-- **Impact**: Can't show loading for individual categories while fetching subcategories.
-- **Use Case**: Lazy-load subcategories on demand.
-
-### 8. **Customizable Empty Subcategory Message**
-- **Issue**: When subcategory array is empty, no message is shown.
-- **Impact**: Users don't know if category has no subcategories.
-- **Use Case**: Display "No subcategories" message.
-
-### 9. **Accessibility Enhancements**
-- **Issue**: Missing ARIA labels for navigation states, no keyboard shortcuts documented.
-- **Impact**: Screen reader users may have difficulty understanding navigation state.
-- **Use Case**: Full keyboard navigation, screen reader support.
-
-### 10. **Customizable Back Button**
-- **Issue**: Back button is hardcoded with specific styling.
-- **Impact**: Can't customize back button appearance or behavior.
-- **Use Case**: Custom back button text, icon, or styling.
-
-### 11. **Breadcrumb Navigation**
-- **Issue**: No breadcrumb trail showing navigation path.
-- **Impact**: Users can't see where they are in the hierarchy.
-- **Use Case**: Multi-level navigation with breadcrumbs.
-
-### 12. **Search/Filter Functionality**
-- **Issue**: No built-in search or filter for categories/subcategories.
-- **Impact**: Hard to find items in long lists.
-- **Use Case**: Search categories, filter by criteria.
-
-### 13. **Virtualization for Long Lists**
-- **Issue**: All items render at once, no virtualization.
-- **Impact**: Performance issues with very long lists.
-- **Use Case**: Handle hundreds of categories efficiently.
-
-### 14. **Selection State Management**
-- **Issue**: No way to mark selected category/subcategory.
-- **Impact**: Can't show which item is currently selected.
-- **Use Case**: Highlight selected items, multi-select.
-
-### 15. **Custom Rendering**
-- **Issue**: Can't customize how categories/subcategories are rendered.
-- **Impact**: Limited styling and layout options.
-- **Use Case**: Custom card layouts, additional metadata display.
-
----
-
-## Recommendations
-
-1. **High Priority**: Fix useEffect dependency issue (add contentId and type to dependency array)
-2. **High Priority**: Add error state handling
-3. **Medium Priority**: Add empty state messaging
-4. **Medium Priority**: Add category/subcategory selection callbacks
-5. **Low Priority**: Add programmatic navigation API
-6. **Low Priority**: Enhance accessibility with ARIA labels

package/CapCustomSelect/README.md

@@ -1,38 +0,0 @@
-# CapCustomSelect
-
-Extended Ant Design Popover component with custom select functionality and Capillary design system integration.
-
-## Migration from Antd v3 → v6
-
-This component has been migrated to support Ant Design v6 while maintaining backward compatibility with v3/v4/v5 APIs.
-
-## Props
-
-### Deprecated Props (Still Supported)
-
-These props are deprecated but still work for backward compatibility. They will show console warnings in development mode:
-
-| Deprecated Prop | Replacement | Notes |
-|----------------|-------------|-------|
-| `visible` | `open` | Use `open` for controlled state |
-| `onVisibleChange` | `onOpenChange` | Use `onOpenChange` for controlled state callbacks |
-| `overlayClassName` | `classNames.root` | Use `classNames.root` for overlay styling |
-| `overlayStyle` | `styles.root` | Use `styles.root` for overlay inline styles |
-
-### React-Virtuoso Props (Virtual Scrolling)
-
-The component uses [react-virtuoso](https://virtuoso.dev/) for virtual scrolling when `virtual={true}`. This improves performance for large lists by only rendering visible items.
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `virtual` | `boolean` | `false` | Enable virtual scrolling using react-virtuoso |
-| `virtualScrollWidth` | `string \| number` | `'100%'` | Width of virtual scroll container (string like '100%' or number in pixels) |
-| `virtualScrollHeight` | `string \| number` | `200` | Height of virtual scroll container (string like '200px' or number in pixels) |
-| `rowHeight` | `string \| number` | `40` | Fixed height of each row/item in pixels (string like '40px' or number). Used as `fixedItemHeight` in react-virtuoso for optimal performance |
-| `virtualContainerStyle` | `CSSProperties` | `{}` | Additional CSS styles to apply to the virtual scroll container |
-
-**Note:** The component maps react-virtualized props to react-virtuoso props:
-- `rowCount` → `totalCount` (automatically set from filtered items)
-- `rowHeight` → `fixedItemHeight` (when provided)
-- `rowRenderer` → `itemContent` (internal implementation)
-- `AutoSizer` → Direct `style` prop on `Virtuoso` component

package/CapDatePicker/README.md

@@ -1,139 +0,0 @@
-# CapDatePicker
-
-A wrapper component around Ant Design's DatePicker component that provides consistent styling, timezone support, and a simplified API for date selection in Capillary applications.
-
-## Migration from Ant Design v3 to v6
-
-This component has been migrated from Ant Design v3 to v6 with the following changes:
-
-### Breaking Changes
-
-#### 1. API Changes
-
-| v3 API | v6 API | Status | Migration Guide |
-|--------|--------|--------|-----------------|
-| `dropdownClassName` | `popupClassName` | Deprecated | Replace `dropdownClassName` with `popupClassName`. Backward compatibility maintained. |
-| `dropdownStyle` | `popupStyle` | Deprecated | Replace `dropdownStyle` with `popupStyle`. Backward compatibility maintained. |
-| `getCalendarContainer` | `getPopupContainer` | Deprecated | Replace `getCalendarContainer` with `getPopupContainer`. Backward compatibility maintained. |
-| `open` | `popupOpen` | Deprecated | Replace `open` with `popupOpen`. Backward compatibility maintained. |
-| `onOpenChange` | `onPopupOpenChange` | Deprecated | Replace `onOpenChange` with `onPopupOpenChange`. Backward compatibility maintained. |
-| `showToday` | N/A | Deprecated | This prop is deprecated. Today button behavior is now handled internally by Ant Design. Backward compatibility maintained but discouraged. |
-| `renderExtraFooter` | Custom Panel | Deprecated | This prop is discouraged. Consider using custom panel components instead. Backward compatibility maintained but discouraged. |
-
-#### 2. Date Library Migration
-
-The component now uses Day.js instead of Moment.js, consistent with Ant Design v6:
-
-- **Props accepting dates**: `value`, `defaultValue`, `defaultPickerValue` now accept Dayjs objects
-- **Callbacks returning dates**: `onChange` now returns Dayjs objects
-
-**Migration Path for Consumers:**
-```javascript
-// Before (moment)
-import moment from 'moment-timezone';
-<CapDatePicker 
-  value={moment('2024-01-15')} 
-  onChange={(momentObj) => console.log(momentObj.format())} 
-/>
-
-// After (dayjs)
-import dayjs from '@dayjs';
-<CapDatePicker 
-  value={dayjs('2024-01-15')} 
-  onChange={(dayjsObj) => console.log(dayjsObj.format())} 
-/>
-```
-
-**Note:** The component maintains backward compatibility for Moment.js objects passed as props - they are automatically converted to Dayjs internally. However, callbacks will always return Dayjs objects.
-
-### Backward Compatibility
-
-The component maintains backward compatibility for deprecated props:
-
-- **`dropdownClassName` prop**: Still works but logs a deprecation warning in development. Use `popupClassName` instead.
-- **`dropdownStyle` prop**: Still works but logs a deprecation warning in development. Use `popupStyle` instead.
-- **`getCalendarContainer` prop**: Still works but logs a deprecation warning in development. Use `getPopupContainer` instead.
-- **`open` prop**: Still works but logs a deprecation warning in development. Use `popupOpen` instead.
-- **`onOpenChange` prop**: Still works but logs a deprecation warning in development. Use `onPopupOpenChange` instead.
-- **`showToday` prop**: Still works but logs a deprecation warning in development. This prop is deprecated as today button behavior is handled internally.
-- **`renderExtraFooter` prop**: Still works but logs a deprecation warning in development. Consider using custom panel components instead.
-
-### Style Changes
-
-**Approach**: The component uses CSS Modules with design tokens. Custom styling is applied through:
-- CSS Modules classes for component-specific styles (timezone footer)
-- Shared `datePickerCommon.scss` for common DatePicker styling patterns
-- Design tokens via `$CAP_*` variables
-
-### Code Improvements
-
-1. **Removed PropTypes**: Replaced with TypeScript interfaces
-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. **CSS Modules**: All styles use CSS Modules with `styles[classname]` pattern
-5. **Type safety**: Full TypeScript support with proper Dayjs types
-
-### What Stayed the Same
-
-- All DatePicker functionality (date selection, formatting, etc.)
-- Timezone footer display
-- Custom icon support
-- Size variants (small, default, large)
-- ComponentWithLabelHOC integration
-
-### What Changed
-
-- **Removed**: PropTypes dependency
-- **Updated**: Import from `antd-v5` (v6 compatible)
-- **Updated**: Multiple deprecated props migrated to v6 API (with backward compatibility):
-  - `dropdownClassName` → `popupClassName`
-  - `dropdownStyle` → `popupStyle`
-  - `getCalendarContainer` → `getPopupContainer`
-  - `open` → `popupOpen`
-  - `onOpenChange` → `onPopupOpenChange`
-- **Updated**: Moment.js → Day.js (with automatic conversion for backward compatibility)
-
-## Usage
-
-```tsx
-import CapDatePicker from '@capillarytech/blaze-ui/components/CapDatePicker';
-import dayjs from '@dayjs';
-
-function MyComponent() {
-  const [date, setDate] = useState<dayjs.Dayjs | null>(null);
-
-  return (
-    <CapDatePicker
-      value={date}
-      onChange={(newDate) => setDate(newDate)}
-      size="large"
-      timezone="America/New_York"
-      showTimezone
-      popupClassName="my-custom-popup"
-    />
-  );
-}
-```
-
-## Props
-
-See `types.ts` for complete prop definitions. Key props:
-
-- `value`: Dayjs object or null
-- `defaultValue`: Dayjs object or null
-- `onChange`: Callback with (date: Dayjs | null, dateString: string)
-- `size`: 'small' | 'default' | 'large' (default: 'large')
-- `timezone`: Timezone string (default: 'UTC')
-- `showTimezone`: Whether to show timezone footer (default: false)
-- `popupClassName`: Custom class for popup (v6 API)
-- `popupStyle`: Custom style for popup (v6 API)
-- `getPopupContainer`: Container for popup (v6 API)
-- `popupOpen`: Whether popup is open (v6 API)
-- `onPopupOpenChange`: Callback when popup open state changes (v6 API)
-- `dropdownClassName`: Deprecated - use `popupClassName` instead
-- `dropdownStyle`: Deprecated - use `popupStyle` instead
-- `getCalendarContainer`: Deprecated - use `getPopupContainer` instead
-- `open`: Deprecated - use `popupOpen` instead
-- `onOpenChange`: Deprecated - use `onPopupOpenChange` instead
-- `showToday`: Deprecated - behavior handled internally
-- `renderExtraFooter`: Deprecated - consider custom panel components