@coreui/react-pro 5.20.0 → 5.22.0

package/src/components/time-picker/CTimePickerRollCol.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { useForkedRef, useIsVisible } from '../../hooks'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 export interface Element {
   value: number | string
@@ -10,52 +11,134 @@ export interface Element {
 }
 
 export interface CTimePickerRollColProps {
+  ariaLabel?: string
+  columnIndex: number
+  columnRefs: (HTMLDivElement | null)[]
   elements: Element[]
   onClick?: (value: number | string) => void
   selected?: number | string | null
 }
 
 export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColProps>(
-  ({ elements, onClick, selected }, ref) => {
-    const init = useRef(true)
+  ({ ariaLabel, columnIndex, columnRefs, elements, onClick, selected }, ref) => {
     const colRef = useRef<HTMLDivElement>(null)
+    const firstRender = useRef(true)
     const forkedRef = useForkedRef(ref, colRef)
     const isVisible = useIsVisible(colRef)
 
     useEffect(() => {
+      if (isVisible) {
+        setRoll(firstRender.current ? 'instant' : 'smooth')
+
+        firstRender.current = false
+      }
+    }, [isVisible, selected])
+
+    const moveFocusToNextColumn = useCallback(() => {
+      const columns = columnRefs
+      if (columns?.length === 0) {
+        return
+      }
+
+      if (columnIndex < columns.length - 1) {
+        const column = columns[columnIndex + 1]
+        ;(column?.querySelector('.time-picker-roll-cell[tabindex="0"') as HTMLElement).focus()
+      }
+    }, [columnIndex, columnRefs])
+
+    const moveFocusToPreviousColumn = useCallback(() => {
+      const columns = columnRefs
+      if (columns?.length === 0) {
+        return
+      }
+
+      if (columnIndex > 0) {
+        const column = columns[columnIndex - 1]
+        ;(column?.querySelector('.time-picker-roll-cell[tabindex="0"') as HTMLElement).focus()
+      }
+    }, [columnIndex, columnRefs])
+
+    const setRoll = useCallback((behavior: 'instant' | 'smooth') => {
       const nodeEl = colRef.current?.querySelector('.selected')
-      if (isVisible && nodeEl && nodeEl instanceof HTMLElement) {
+      if (nodeEl && nodeEl instanceof HTMLElement) {
         colRef.current?.scrollTo({
           top: nodeEl.offsetTop,
-          behavior: init.current ? 'auto' : 'smooth',
+          behavior: behavior,
         })
       }
+    }, [])
 
-      if (isVisible) {
-        init.current = false
-      }
-    }, [isVisible, selected])
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
+        if (event.code === 'Space' || event.key === 'Enter') {
+          event.preventDefault()
+          onClick?.(value)
+          moveFocusToNextColumn()
+          return
+        }
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
-      if (event.code === 'Space' || event.key === 'Enter') {
-        event.preventDefault()
-        onClick?.(value)
-      }
-    }
+        if (colRef.current && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+          event.preventDefault()
+          const target = event.target as HTMLElement
+          const items = [
+            ...colRef.current.querySelectorAll('.time-picker-roll-cell'),
+          ] as HTMLElement[]
+
+          getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+          return
+        }
+
+        if (colRef.current && (event.key === 'Home' || event.key === 'End')) {
+          event.preventDefault()
+          const items = [
+            ...colRef.current.querySelectorAll('.time-picker-roll-cell'),
+          ] as HTMLElement[]
+          const index = event.key === 'Home' ? 0 : items.length - 1
+          items[index].focus()
+          return
+        }
+
+        if (colRef.current && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+          event.preventDefault()
+          const rtl = isRTL(colRef.current)
+          const shouldGoLeft =
+            (event.key === 'ArrowLeft' && !rtl) || (event.key === 'ArrowRight' && rtl)
+          if (shouldGoLeft) {
+            moveFocusToPreviousColumn()
+          } else {
+            moveFocusToNextColumn()
+          }
+        }
+      },
+      [onClick, moveFocusToNextColumn, moveFocusToPreviousColumn]
+    )
 
     return (
-      <div className="time-picker-roll-col" ref={forkedRef}>
+      <div
+        className="time-picker-roll-col"
+        onBlur={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            setRoll('smooth')
+          }
+        }}
+        role="listbox"
+        aria-label={ariaLabel}
+        ref={forkedRef}
+      >
         {elements.map((element, index) => {
+          const isSelected = element.value === selected
           return (
             <div
               className={classNames('time-picker-roll-cell', {
-                selected: element.value === selected,
+                selected: isSelected,
               })}
               key={index}
               onClick={() => onClick?.(element.value)}
               onKeyDown={(event) => handleKeyDown(event, element.value)}
-              role="button"
-              tabIndex={0}
+              role="option"
+              tabIndex={isSelected ? 0 : selected ? -1 : index === 0 ? 0 : -1}
+              aria-label={element.label.toString()}
+              aria-selected={isSelected}
             >
               {element.label}
             </div>
@@ -63,7 +146,7 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
         })}
       </div>
     )
-  },
+  }
 )
 
 CTimePickerRollCol.propTypes = {

package/src/components/toast/CToastBody.tsx

@@ -16,7 +16,7 @@ export const CToastBody = forwardRef<HTMLDivElement, CToastBodyProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CToastBody.propTypes = {

package/src/components/toast/CToastHeader.tsx

@@ -23,7 +23,7 @@ export const CToastHeader = forwardRef<HTMLDivElement, CToastHeaderProps>(
         {closeButton && <CToastClose />}
       </div>
     )
-  },
+  }
 )
 
 CToastHeader.propTypes = {

package/src/components/toast/__tests__/CToaster.spec.tsx

@@ -27,13 +27,13 @@ test('CToaster customize', async () => {
                 <CToastHeader closeButton>Lorem ipsum</CToastHeader>
                 <CToastBody>Hello, world! This is a toast message.</CToastBody>
               </CToast>
-            </>,
+            </>
           )
         }
       >
         Send a toast
       </CButton>
-    </>,
+    </>
   )
   expect(container).toMatchSnapshot()
   const btn = document.querySelector('.btn')

package/src/components/widgets/CWidgetStatsA.tsx

@@ -54,7 +54,7 @@ export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
         {chart}
       </CCard>
     )
-  },
+  }
 )
 
 CWidgetStatsA.propTypes = {

package/src/components/widgets/CWidgetStatsB.tsx

@@ -64,7 +64,7 @@ export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
         </CCardBody>
       </CCard>
     )
-  },
+  }
 )
 
 CWidgetStatsB.propTypes = {

package/src/components/widgets/CWidgetStatsC.tsx

@@ -58,7 +58,7 @@ export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
             <div
               className={classNames(
                 'text-end mb-4',
-                inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
+                inverse ? 'text-white text-opacity-75' : 'text-body-secondary'
               )}
             >
               {icon}
@@ -79,7 +79,7 @@ export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
         </CCardBody>
       </CCard>
     )
-  },
+  }
 )
 
 CWidgetStatsC.propTypes = {

package/src/components/widgets/CWidgetStatsD.tsx

@@ -47,7 +47,7 @@ export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
             'position-relative d-flex justify-content-center align-items-center',
             {
               [`bg-${color}`]: color,
-            },
+            }
           )}
         >
           {icon}
@@ -69,7 +69,7 @@ export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
         </CCardBody>
       </CCard>
     )
-  },
+  }
 )
 
 CWidgetStatsD.propTypes = {

package/src/components/widgets/CWidgetStatsE.tsx

@@ -36,7 +36,7 @@ export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
         </CCardBody>
       </CCard>
     )
-  },
+  }
 )
 
 CWidgetStatsE.propTypes = {

package/src/components/widgets/CWidgetStatsF.tsx

@@ -53,7 +53,7 @@ export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
         {footer && <CCardFooter>{footer}</CCardFooter>}
       </CCard>
     )
-  },
+  }
 )
 
 CWidgetStatsF.propTypes = {

package/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx

@@ -19,7 +19,7 @@ test('CWidgetStatsA customize', async () => {
       value="value"
     >
       Test
-    </CWidgetStatsA>,
+    </CWidgetStatsA>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bg-info')

package/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx

@@ -20,7 +20,7 @@ test('CWidgetStatsB customize', async () => {
       value="value"
     >
       Test
-    </CWidgetStatsB>,
+    </CWidgetStatsB>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx

@@ -20,7 +20,7 @@ test('CWidgetStatsC customize', async () => {
       value="value"
     >
       Test
-    </CWidgetStatsC>,
+    </CWidgetStatsC>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

@@ -17,7 +17,7 @@ test('CWidgetStatsD customize', async () => {
         { title: 'friends', value: '89K' },
         { title: 'feeds', value: '459' },
       ]}
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx

@@ -12,7 +12,7 @@ test('CWidgetStatsE customize', async () => {
   const { container } = render(
     <CWidgetStatsE className="bazinga" title="title" value="value">
       Test
-    </CWidgetStatsE>,
+    </CWidgetStatsE>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx

@@ -20,7 +20,7 @@ test('CWidgetStatsF customize', async () => {
       value="value"
     >
       Test
-    </CWidgetStatsF>,
+    </CWidgetStatsF>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -47,7 +47,7 @@ test('CWidgetStatsF customize', async () => {
         expect(container.firstChild.firstChild.lastChild.firstChild).toHaveClass('text-info')
         expect(container.firstChild.firstChild.lastChild.firstChild).toHaveTextContent('value')
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass(
-          'text-body-secondary',
+          'text-body-secondary'
         )
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('text-uppercase')
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('fw-semibold ')

package/src/helpers/polymorphicComponent.ts

@@ -13,7 +13,7 @@ export interface Props<As extends ElementType = ElementType> extends AsProp<As>
 export interface PolymorphicRefForwardingComponent<TInitial extends ElementType, P = unknown> {
   <As extends ElementType = TInitial>(
     props: PropsWithChildren<ReplaceProps<As, Props<As> & P>>,
-    context?: any, // eslint-disable-line @typescript-eslint/no-explicit-any
+    context?: any // eslint-disable-line @typescript-eslint/no-explicit-any
   ): ReactNode | null
   propTypes?: any // eslint-disable-line @typescript-eslint/no-explicit-any
   defaultProps?: Partial<P>

package/src/utils/executeAfterTransition.ts

@@ -13,7 +13,7 @@ const triggerTransitionEnd = (element: HTMLElement) => {
 const executeAfterTransition = (
   callback: () => void,
   transitionElement: HTMLElement,
-  waitForTransition = true,
+  waitForTransition = true
 ) => {
   if (!waitForTransition) {
     execute(callback)

package/src/utils/getNextActiveElement.ts

@@ -2,7 +2,7 @@ const getNextActiveElement = (
   list: HTMLElement[],
   activeElement: HTMLElement,
   shouldGetNext: boolean,
-  isCycleAllowed: boolean,
+  isCycleAllowed: boolean
 ) => {
   const listLength = list.length
   let index = list.indexOf(activeElement)

package/src/utils/mergeClassNames.ts

@@ -1,6 +1,6 @@
 const mergeClassNames = <T extends object>(
   defaultClassNames: T,
-  customClassNames?: Partial<T>,
+  customClassNames?: Partial<T>
 ): T => {
   if (customClassNames === undefined || typeof customClassNames !== 'object') {
     return defaultClassNames