@coreui/react-pro 5.24.0 → 5.25.0

package/src/components/calendar/__tests__/CCalendar.interactions.spec.tsx

@@ -1,593 +0,0 @@
-import * as React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom'
-import { CCalendar } from '../CCalendar'
-
-describe('CCalendar Interactions', () => {
-  let user: ReturnType<typeof userEvent.setup>
-
-  beforeEach(() => {
-    user = userEvent.setup()
-    jest.clearAllMocks()
-  })
-
-  describe('Mouse Interactions', () => {
-    it('handles click on calendar dates', async () => {
-      const onCalendarDateChange = jest.fn()
-      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      expect(calendar).toBeInTheDocument()
-      
-      // This would need to be more specific based on actual calendar DOM structure
-      // For now, we just verify the component renders and can receive clicks
-      await user.click(calendar)
-    })
-
-    it('handles double-click events', async () => {
-      const onCalendarDateChange = jest.fn()
-      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      await user.dblClick(calendar)
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles mouse hover for date previews', async () => {
-      render(<CCalendar />)
-      
-      const calendar = screen.getByRole('application')
-      await user.hover(calendar)
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles right-click context menu', async () => {
-      const onContextMenu = jest.fn((e) => e.preventDefault())
-      render(<CCalendar onContextMenu={onContextMenu} />)
-      
-      const calendar = screen.getByRole('application')
-      fireEvent.contextMenu(calendar)
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles mouse drag for range selection', async () => {
-      render(<CCalendar range />)
-      
-      const calendar = screen.getByRole('application')
-      
-      // Simulate drag operation
-      fireEvent.mouseDown(calendar, { clientX: 100, clientY: 100 })
-      fireEvent.mouseMove(calendar, { clientX: 200, clientY: 100 })
-      fireEvent.mouseUp(calendar, { clientX: 200, clientY: 100 })
-      
-      expect(calendar).toBeInTheDocument()
-    })
-  })
-
-  describe('Keyboard Interactions', () => {
-    it('handles Arrow keys for navigation', async () => {
-      const onCalendarDateChange = jest.fn()
-      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      // Test all arrow keys
-      await user.keyboard('{ArrowRight}')
-      await user.keyboard('{ArrowLeft}')
-      await user.keyboard('{ArrowDown}')
-      await user.keyboard('{ArrowUp}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles Enter key for selection', async () => {
-      const onCalendarDateChange = jest.fn()
-      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      await user.keyboard('{Enter}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles Space key for selection', async () => {
-      const onCalendarDateChange = jest.fn()
-      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      await user.keyboard('{Space}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles Escape key for cancellation', async () => {
-      const onEscape = jest.fn()
-      render(<CCalendar onKeyDown={onEscape} />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      await user.keyboard('{Escape}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles Tab key for focus management', async () => {
-      render(
-        <div>
-          <button>Before</button>
-          <CCalendar />
-          <button>After</button>
-        </div>
-      )
-      
-      const beforeButton = screen.getByText('Before')
-      const afterButton = screen.getByText('After')
-      
-      beforeButton.focus()
-      
-      // Tab to calendar
-      await user.keyboard('{Tab}')
-      
-      // Tab past calendar
-      await user.keyboard('{Tab}')
-      
-      expect(afterButton).toHaveFocus()
-    })
-
-    it('handles Home/End keys for navigation', async () => {
-      render(<CCalendar />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      await user.keyboard('{Home}')
-      await user.keyboard('{End}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles Page Up/Down for month navigation', async () => {
-      render(<CCalendar />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      await user.keyboard('{PageUp}')
-      await user.keyboard('{PageDown}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles Ctrl+Arrow keys for year navigation', async () => {
-      render(<CCalendar />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      await user.keyboard('{Control>}{ArrowUp}{/Control}')
-      await user.keyboard('{Control>}{ArrowDown}{/Control}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles Shift+Arrow keys for range selection', async () => {
-      render(<CCalendar range />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      await user.keyboard('{Shift>}{ArrowRight}{/Shift}')
-      await user.keyboard('{Shift>}{ArrowDown}{/Shift}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-  })
-
-  describe('Touch Interactions', () => {
-    it('handles touch tap for selection', () => {
-      const onCalendarDateChange = jest.fn()
-      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      
-      fireEvent.touchStart(calendar, {
-        touches: [{ clientX: 100, clientY: 100 }]
-      })
-      
-      fireEvent.touchEnd(calendar, {
-        changedTouches: [{ clientX: 100, clientY: 100 }]
-      })
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles touch swipe for navigation', () => {
-      render(<CCalendar />)
-      
-      const calendar = screen.getByRole('application')
-      
-      // Swipe left (next month)
-      fireEvent.touchStart(calendar, {
-        touches: [{ clientX: 200, clientY: 100 }]
-      })
-      
-      fireEvent.touchMove(calendar, {
-        touches: [{ clientX: 100, clientY: 100 }]
-      })
-      
-      fireEvent.touchEnd(calendar, {
-        changedTouches: [{ clientX: 100, clientY: 100 }]
-      })
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles pinch gestures for zoom', () => {
-      render(<CCalendar />)
-      
-      const calendar = screen.getByRole('application')
-      
-      // Simulate pinch gesture
-      fireEvent.touchStart(calendar, {
-        touches: [
-          { clientX: 100, clientY: 100 },
-          { clientX: 200, clientY: 100 }
-        ]
-      })
-      
-      fireEvent.touchMove(calendar, {
-        touches: [
-          { clientX: 50, clientY: 100 },
-          { clientX: 250, clientY: 100 }
-        ]
-      })
-      
-      fireEvent.touchEnd(calendar, {
-        changedTouches: [
-          { clientX: 50, clientY: 100 },
-          { clientX: 250, clientY: 100 }
-        ]
-      })
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('prevents default touch behaviors appropriately', () => {
-      const preventDefault = jest.fn()
-      
-      render(<CCalendar />)
-      
-      const calendar = screen.getByRole('application')
-      
-      const mockEvent = {
-        touches: [{ clientX: 100, clientY: 100 }],
-        preventDefault
-      }
-      
-      fireEvent.touchStart(calendar, mockEvent)
-      
-      expect(calendar).toBeInTheDocument()
-    })
-  })
-
-  describe('Focus Management', () => {
-    it('manages focus within calendar', async () => {
-      render(<CCalendar />)
-      
-      const calendar = screen.getByRole('application')
-      
-      // Focus should be manageable
-      calendar.focus()
-      expect(calendar).toHaveFocus()
-      
-      calendar.blur()
-      expect(calendar).not.toHaveFocus()
-    })
-
-    it('traps focus within modal calendar', async () => {
-      render(
-        <div>
-          <button>Outside Before</button>
-          <CCalendar />
-          <button>Outside After</button>
-        </div>
-      )
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      // Tab should stay within calendar (if it's modal)
-      await user.keyboard('{Tab}')
-      
-      expect(screen.getByText('Outside After')).not.toHaveFocus()
-    })
-
-    it('restores focus after date selection', async () => {
-      const onCalendarDateChange = jest.fn()
-      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      await user.keyboard('{Enter}')
-      
-      // Focus should remain on calendar or appropriate element
-      expect(document.activeElement).toBeDefined()
-    })
-
-    it('handles focus with disabled dates', async () => {
-      const disabledDate = new Date(2022, 1, 16)
-      render(<CCalendar disabledDate={[disabledDate]} />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      // Navigation should skip disabled dates
-      await user.keyboard('{ArrowRight}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-  })
-
-  describe('Navigation Controls', () => {
-    it('handles navigation button clicks', async () => {
-      const onViewChange = jest.fn()
-      render(<CCalendar navigation onViewChange={onViewChange} />)
-      
-      const calendar = screen.getByRole('application')
-      expect(calendar).toBeInTheDocument()
-      
-      // This would need specific selectors for navigation buttons
-      // For now, we verify the component renders with navigation
-    })
-
-    it('handles month/year selector changes', async () => {
-      const onCalendarDateChange = jest.fn()
-      render(<CCalendar navigation onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      expect(calendar).toBeInTheDocument()
-      
-      // This would interact with month/year dropdowns if they exist
-    })
-
-    it('handles view type switching', async () => {
-      const onViewChange = jest.fn()
-      render(<CCalendar onViewChange={onViewChange} />)
-      
-      const calendar = screen.getByRole('application')
-      
-      // Test clicking on month/year headers to switch views
-      // Implementation depends on actual DOM structure
-      expect(calendar).toBeInTheDocument()
-    })
-  })
-
-  describe('Range Selection Interactions', () => {
-    it('handles range selection with mouse', async () => {
-      const onStartDateChange = jest.fn()
-      const onEndDateChange = jest.fn()
-      
-      render(
-        <CCalendar 
-          range
-          onStartDateChange={onStartDateChange}
-          onEndDateChange={onEndDateChange}
-        />
-      )
-      
-      const calendar = screen.getByRole('application')
-      
-      // Click to start range
-      await user.click(calendar)
-      
-      // Click to end range (would need specific date cells)
-      await user.click(calendar)
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles range selection with keyboard', async () => {
-      const onStartDateChange = jest.fn()
-      const onEndDateChange = jest.fn()
-      
-      render(
-        <CCalendar 
-          range
-          onStartDateChange={onStartDateChange}
-          onEndDateChange={onEndDateChange}
-        />
-      )
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      // Start range with Enter
-      await user.keyboard('{Enter}')
-      
-      // Navigate and end range
-      await user.keyboard('{ArrowRight}{ArrowRight}{ArrowRight}')
-      await user.keyboard('{Enter}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles range selection cancellation', async () => {
-      render(<CCalendar range />)
-      
-      const calendar = screen.getByRole('application')
-      calendar.focus()
-      
-      // Start range
-      await user.keyboard('{Enter}')
-      
-      // Cancel with Escape
-      await user.keyboard('{Escape}')
-      
-      expect(calendar).toBeInTheDocument()
-    })
-  })
-
-  describe('Callback Behavior', () => {
-    it('calls callbacks with correct parameters', async () => {
-      const onCalendarDateChange = jest.fn()
-      const onStartDateChange = jest.fn()
-      const onEndDateChange = jest.fn()
-      const onViewChange = jest.fn()
-      
-      render(
-        <CCalendar 
-          range
-          onCalendarDateChange={onCalendarDateChange}
-          onStartDateChange={onStartDateChange}
-          onEndDateChange={onEndDateChange}
-          onViewChange={onViewChange}
-        />
-      )
-      
-      const calendar = screen.getByRole('application')
-      
-      // Test interactions that should trigger callbacks
-      await user.click(calendar)
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('handles callback errors gracefully', async () => {
-      const errorCallback = jest.fn(() => {
-        throw new Error('Callback error')
-      })
-      
-      // Component should not crash due to callback errors
-      render(<CCalendar onCalendarDateChange={errorCallback} />)
-      
-      const calendar = screen.getByRole('application')
-      
-      // This should not throw
-      await user.click(calendar)
-      
-      expect(calendar).toBeInTheDocument()
-    })
-
-    it('calls callbacks in correct order', async () => {
-      const callOrder: string[] = []
-      
-      const onCalendarDateChange = jest.fn(() => callOrder.push('calendarDate'))
-      const onViewChange = jest.fn(() => callOrder.push('view'))
-      
-      render(
-        <CCalendar 
-          onCalendarDateChange={onCalendarDateChange}
-          onViewChange={onViewChange}
-        />
-      )
-      
-      const calendar = screen.getByRole('application')
-      
-      // Perform actions that trigger multiple callbacks
-      await user.click(calendar)
-      
-      expect(calendar).toBeInTheDocument()
-      // Verify order if callbacks were called
-    })
-
-    it('prevents callback loops', async () => {
-      const onCalendarDateChange = jest.fn((date) => {
-        // Callback that might cause infinite loop
-        if (date) {
-          // This should not cause the component to re-trigger the callback
-        }
-      })
-      
-      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
-      
-      const calendar = screen.getByRole('application')
-      await user.click(calendar)
-      
-      expect(calendar).toBeInTheDocument()
-      
-      // Ensure callback wasn't called excessively
-      await waitFor(() => {
-        expect(onCalendarDateChange.mock.calls.length).toBeLessThan(10)
-      })
-    })
-  })
-
-  describe('Dynamic Content Updates', () => {
-    it('handles dynamic disabled date updates', async () => {
-      const TestComponent = () => {
-        const [disabledDates, setDisabledDates] = React.useState<Date[]>([])
-        
-        React.useEffect(() => {
-          setTimeout(() => {
-            setDisabledDates([new Date(2022, 1, 16)])
-          }, 100)
-        }, [])
-        
-        return <CCalendar disabledDate={disabledDates} />
-      }
-      
-      render(<TestComponent />)
-      
-      const calendar = screen.getByRole('application')
-      
-      await waitFor(() => {
-        expect(calendar).toBeInTheDocument()
-      })
-    })
-
-    it('handles dynamic min/max date updates', async () => {
-      const TestComponent = () => {
-        const [minDate, setMinDate] = React.useState<Date | null>(null)
-        
-        React.useEffect(() => {
-          setTimeout(() => {
-            setMinDate(new Date(2022, 0, 1))
-          }, 100)
-        }, [])
-        
-        return <CCalendar minDate={minDate} />
-      }
-      
-      render(<TestComponent />)
-      
-      const calendar = screen.getByRole('application')
-      
-      await waitFor(() => {
-        expect(calendar).toBeInTheDocument()
-      })
-    })
-
-    it('handles dynamic locale changes', async () => {
-      const TestComponent = () => {
-        const [locale, setLocale] = React.useState('en-US')
-        
-        React.useEffect(() => {
-          setTimeout(() => {
-            setLocale('pl-PL')
-          }, 100)
-        }, [])
-        
-        return <CCalendar locale={locale} />
-      }
-      
-      render(<TestComponent />)
-      
-      const calendar = screen.getByRole('application')
-      
-      await waitFor(() => {
-        expect(calendar).toBeInTheDocument()
-      })
-    })
-  })
-})

package/src/components/header/CHeaderBrand.tsx~HEAD

@@ -1,36 +0,0 @@
-import React, { ElementType, forwardRef, AnchorHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { PolymorphicRefForwardingComponent } from '../../helpers'
-
-export interface CHeaderBrandProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  as?: ElementType
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-}
-
-export const CHeaderBrand: PolymorphicRefForwardingComponent<'a', CHeaderBrandProps> = forwardRef<
-  HTMLAnchorElement | HTMLSpanElement,
-  CHeaderBrandProps
->(({ children, as: Component = 'a', className, ...rest }, ref) => {
-  return (
-    <Component className={classNames('header-brand', className)} {...rest} ref={ref}>
-      {children}
-    </Component>
-  )
-})
-
-CHeaderBrand.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node,
-  className: PropTypes.string,
-}
-
-CHeaderBrand.displayName = 'CHeaderBrand'