@coreui/react-pro 5.20.0 → 5.22.0

package/src/components/placeholder/CPlaceholder.tsx

@@ -93,7 +93,7 @@ export const CPlaceholder: PolymorphicRefForwardingComponent<'span', CPlaceholde
               [`placeholder-${size}`]: size,
             },
             repsonsiveClassNames,
-            className,
+            className
           )}
           {...rest}
           ref={ref}
@@ -101,7 +101,7 @@ export const CPlaceholder: PolymorphicRefForwardingComponent<'span', CPlaceholde
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CPlaceholder.propTypes = {

package/src/components/placeholder/__tests__/CPlaceholder.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CPlaceholder component', async () => {
 
 test('CPlaceholder customize', async () => {
   const { container } = render(
-    <CPlaceholder animation="glow" className="bazinga" color="secondary" size="lg" sm={7} />,
+    <CPlaceholder animation="glow" className="bazinga" color="secondary" size="lg" sm={7} />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/progress/__tests__/CProgress.spec.tsx

@@ -12,7 +12,7 @@ test('CProgress customize', async () => {
   const { container } = render(
     <CProgress className="bazinga" height={100} color="warning" value={50}>
       Test
-    </CProgress>,
+    </CProgress>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/progress/__tests__/CProgressBar.spec.tsx

@@ -12,7 +12,7 @@ test('CProgressBar customize', async () => {
   const { container } = render(
     <CProgressBar color="warning" className="bazinga" animated={true} value={50} variant="striped">
       Test
-    </CProgressBar>,
+    </CProgressBar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/sidebar/CSidebarFooter.tsx

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

package/src/components/sidebar/CSidebarHeader.tsx

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

package/src/components/sidebar/CSidebarToggler.tsx

@@ -16,7 +16,7 @@ export const CSidebarToggler = forwardRef<HTMLButtonElement, CSidebarTogglerProp
         {children}
       </button>
     )
-  },
+  }
 )
 
 CSidebarToggler.propTypes = {

package/src/components/sidebar/__tests__/CSidebar.spec.tsx

@@ -21,7 +21,7 @@ test('CSidebar customize show', async () => {
       overlaid={true}
     >
       Test
-    </CSidebar>,
+    </CSidebar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -37,7 +37,7 @@ test('CSidebar customize hide', async () => {
   const { container } = render(
     <CSidebar className="bazinga" position="sticky" visible={false} overlaid={false}>
       Test
-    </CSidebar>,
+    </CSidebar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/spinner/CSpinner.tsx

@@ -49,7 +49,7 @@ export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> =
       visuallyHiddenLabel = 'Loading...',
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <Component
@@ -59,7 +59,7 @@ export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> =
             [`spinner-${variant}-${size}`]: size,
             [`text-${color}`]: color,
           },
-          className,
+          className
         )}
         role="status"
         {...rest}
@@ -68,7 +68,7 @@ export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> =
         <span className="visually-hidden">{visuallyHiddenLabel}</span>
       </Component>
     )
-  },
+  }
 )
 
 CSpinner.propTypes = {

package/src/components/spinner/__tests__/CSpinner.spec.tsx

@@ -12,7 +12,7 @@ test('CSpinner customize', async () => {
   const { container } = render(
     <CSpinner className="bazinga" color="warning" as="h3" size="sm" variant="grow">
       Test
-    </CSpinner>,
+    </CSpinner>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/table/CTable.tsx

@@ -151,7 +151,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
       tableHeadProps,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const columnNames = useMemo(() => getColumnNames(columns, items), [columns, items])
 
@@ -172,7 +172,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
               'table-striped': striped,
               'table-striped-columns': stripedColumns,
             },
-            className,
+            className
           )}
           {...rest}
           ref={ref}
@@ -236,7 +236,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
         </table>
       </CTableResponsiveWrapper>
     )
-  },
+  }
 )
 
 CTable.propTypes = {

package/src/components/table/CTableBody.tsx

@@ -27,7 +27,7 @@ export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
             {
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -36,7 +36,7 @@ export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
         {children}
       </tbody>
     )
-  },
+  }
 )
 
 CTableBody.propTypes = {

package/src/components/table/CTableDataCell.tsx

@@ -45,7 +45,7 @@ export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellPro
               'table-active': active,
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -54,7 +54,7 @@ export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellPro
         {children}
       </Component>
     )
-  },
+  }
 )
 
 CTableDataCell.propTypes = {

package/src/components/table/CTableFoot.tsx

@@ -27,7 +27,7 @@ export const CTableFoot = forwardRef<HTMLTableSectionElement, CTableFootProps>(
             {
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -36,7 +36,7 @@ export const CTableFoot = forwardRef<HTMLTableSectionElement, CTableFootProps>(
         {children}
       </tfoot>
     )
-  },
+  }
 )
 
 CTableFoot.propTypes = {

package/src/components/table/CTableHead.tsx

@@ -27,7 +27,7 @@ export const CTableHead = forwardRef<HTMLTableSectionElement, CTableHeadProps>(
             {
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -36,7 +36,7 @@ export const CTableHead = forwardRef<HTMLTableSectionElement, CTableHeadProps>(
         {children}
       </thead>
     )
-  },
+  }
 )
 
 CTableHead.propTypes = {

package/src/components/table/CTableHeaderCell.tsx

@@ -27,7 +27,7 @@ export const CTableHeaderCell = forwardRef<HTMLTableCellElement, CTableHeaderCel
             {
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -36,7 +36,7 @@ export const CTableHeaderCell = forwardRef<HTMLTableCellElement, CTableHeaderCel
         {children}
       </th>
     )
-  },
+  }
 )
 
 CTableHeaderCell.propTypes = {

package/src/components/table/CTableRow.tsx

@@ -37,7 +37,7 @@ export const CTableRow = forwardRef<HTMLTableRowElement, CTableRowProps>(
               'table-active': active,
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -46,7 +46,7 @@ export const CTableRow = forwardRef<HTMLTableRowElement, CTableRowProps>(
         {children}
       </tr>
     )
-  },
+  }
 )
 
 CTableRow.propTypes = {

package/src/components/table/__tests__/CTable.spec.tsx

@@ -82,7 +82,7 @@ test('CTable customize', async () => {
           <CTableDataCell>Test</CTableDataCell>
         </CTableRow>
       </CTableBody>
-    </CTable>,
+    </CTable>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('table-responsive-xl')
@@ -144,7 +144,7 @@ test('CTable full example test', async () => {
           <CTableHeaderCell>Heading</CTableHeaderCell>
         </CTableRow>
       </CTableFoot>
-    </CTable>,
+    </CTable>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/table/__tests__/CTableBody.spec.tsx

@@ -21,7 +21,7 @@ test('CTableBody customize', async () => {
     </CTableBody>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('table-info')

package/src/components/table/__tests__/CTableDataCell.spec.tsx

@@ -15,7 +15,7 @@ test('loads and displays CTableDataCell component', async () => {
     </CTableBody>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
 })
@@ -32,7 +32,7 @@ test('CTableDataCell customize', async () => {
     </CTableBody>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild?.firstChild?.firstChild).toHaveClass('align-middle')

package/src/components/table/__tests__/CTableFoot.spec.tsx

@@ -21,7 +21,7 @@ test('CTableFoot customize', async () => {
     </CTableFoot>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('table-info')

package/src/components/table/__tests__/CTableHead.spec.tsx

@@ -21,7 +21,7 @@ test('CTableHead customize', async () => {
     </CTableHead>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('table-info')

package/src/components/table/__tests__/CTableHeaderCell.spec.tsx

@@ -13,7 +13,7 @@ test('loads and displays CTableHeaderCell component', async () => {
     </CTableHead>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
 })
@@ -30,7 +30,7 @@ test('CTableHeaderCell customize', async () => {
     </CTableHead>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-info')

package/src/components/table/__tests__/CTableRow.spec.tsx

@@ -11,7 +11,7 @@ test('loads and displays CTableRow component', async () => {
     </CTableBody>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
 })
@@ -26,7 +26,7 @@ test('CTableRow customize', async () => {
     </CTableBody>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild?.firstChild).toHaveClass('align-middle')

package/src/components/tabs/CTab.tsx

@@ -32,7 +32,7 @@ export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
           {
             active: isActive(),
           },
-          className,
+          className
         )}
         id={`${id}${itemKey}-tab`}
         onClick={() => setActiveItemKey(itemKey)}
@@ -48,7 +48,7 @@ export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
         {children}
       </button>
     )
-  },
+  }
 )
 
 CTab.propTypes = {

package/src/components/tabs/CTabContent.tsx

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

package/src/components/tabs/CTabPane.tsx

@@ -46,7 +46,7 @@ export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
                 fade: transition,
                 show: state === 'entered',
               },
-              className,
+              className
             )}
             {...rest}
             ref={forkedRef}
@@ -56,7 +56,7 @@ export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CTabPane.propTypes = {

package/src/components/tabs/CTabPanel.tsx

@@ -68,7 +68,7 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
                 fade: transition,
                 show: state === 'entered',
               },
-              className,
+              className
             )}
             id={`${id}${itemKey}-tab-pane`}
             role="tabpanel"
@@ -82,7 +82,7 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CTabPanel.propTypes = {

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

@@ -31,8 +31,32 @@ export interface CTimePickerProps
    * @since 4.8.0
    */
   ampm?: 'auto' | boolean
+  /**
+   * Accessible label for the hours selection element.
+   */
+  ariaSelectHoursLabel?: string
+  /**
+   * Accessible label for the AM/PM selection element.
+   *
+   * @since 5.22.0
+   */
+  ariaSelectMeridiemLabel?: string
+  /**
+   * Accessible label for the minutes selection element.
+   *
+   * @since 5.22.0
+   */
+  ariaSelectMinutesLabel?: string
+  /**
+   * Accessible label for the seconds selection element.
+   *
+   * @since 5.22.0
+   */
+  ariaSelectSecondsLabel?: string
   /**
    * A string of all className you want applied to the component.
+   *
+   * @since 5.22.0
    */
   className?: string
   /**
@@ -158,6 +182,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
   (
     {
       ampm = 'auto',
+      ariaSelectHoursLabel = 'Select hours',
+      ariaSelectMeridiemLabel = 'Select AM/PM',
+      ariaSelectMinutesLabel = 'Select minutes',
+      ariaSelectSecondsLabel = 'Select seconds',
       cancelButton = 'Cancel',
       cancelButtonColor = 'primary',
       cancelButtonSize = 'sm',
@@ -204,11 +232,13 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
   ) => {
     const formRef = useRef<HTMLFormElement>(null)
     const inputRef = useRef<HTMLInputElement>(null)
+    const timePickerBodyRef = useRef<HTMLDivElement>(null)
+    const columnRefs = useRef<(HTMLDivElement | null)[]>([])
 
     const [date, setDate] = useState<Date | null>(convertTimeToDate(time))
     const [initialDate, setInitialDate] = useState<Date | null>(null)
     const [isValid, setIsValid] = useState(valid ?? (invalid === true ? false : undefined))
-    const [_ampm, setAmPm] = useState<AmPm>(date ? getAmPm(new Date(date), locale) : 'am')
+    const [_ampm, setAmPm] = useState<AmPm | null>(date ? getAmPm(new Date(date), locale) : null)
     const [_visible, setVisible] = useState(visible)
 
     const [localizedTimePartials, setLocalizedTimePartials] = useState<LocalizedTimePartials>({
@@ -293,21 +323,32 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
     }, inputOnChangeDelay)
 
-    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
+    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'meridiem', value: string) => {
       const _date = date || new Date('1970-01-01')
 
-      if (set === 'toggle') {
+      if (set === 'meridiem') {
+        const currentHours = _date.getHours()
+
         if (value === 'am') {
-          _date.setHours(_date.getHours() - 12)
+          setAmPm('am')
+          // Convert PM hours (12-23) to AM hours (0-11)
+          if (currentHours >= 12) {
+            _date.setHours(currentHours - 12)
+          }
         }
+
         if (value === 'pm') {
-          _date.setHours(_date.getHours() + 12)
+          setAmPm('pm')
+          // Convert AM hours (0-11) to PM hours (12-23)
+          if (currentHours < 12) {
+            _date.setHours(currentHours + 12)
+          }
         }
       }
 
       if (set === 'hours') {
         if (localizedTimePartials && localizedTimePartials.hour12) {
-          _date.setHours(convert12hTo24h(_ampm, Number.parseInt(value)))
+          _date.setHours(convert12hTo24h(_ampm ?? 'am', Number.parseInt(value)))
         } else {
           _date.setHours(Number.parseInt(value))
         }
@@ -343,7 +384,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           (typeof indicator === 'boolean' ? (
             <div
               className="time-picker-indicator"
-              {...(disabled !== false && {
+              {...(!disabled && {
                 onClick: () => setVisible(!_visible),
                 onKeyDown: (event) => {
                   if (event.key === 'Enter') {
@@ -380,6 +421,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               handleTimeChange('hours', event.target.value)
             }
             value={getSelectedHour(date, locale)}
+            aria-label={ariaSelectHoursLabel}
           >
             {localizedTimePartials &&
               localizedTimePartials.listOfHours.map((option, index) => (
@@ -398,6 +440,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   handleTimeChange('minutes', event.target.value)
                 }
                 value={getSelectedMinutes(date)}
+                aria-label={ariaSelectMinutesLabel}
               >
                 {localizedTimePartials &&
                   localizedTimePartials.listOfMinutes.map((option, index) => (
@@ -418,6 +461,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   handleTimeChange('seconds', event.target.value)
                 }
                 value={getSelectedSeconds(date)}
+                aria-label={ariaSelectSecondsLabel}
               >
                 {localizedTimePartials &&
                   localizedTimePartials.listOfSeconds.map((option, index) => (
@@ -433,9 +477,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               className="time-picker-inline-select"
               disabled={disabled}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-                handleTimeChange('toggle', event.target.value)
+                handleTimeChange('meridiem', event.target.value)
               }
-              value={_ampm}
+              value={_ampm ?? 'am'}
+              aria-label={ariaSelectMeridiemLabel}
             >
               <option value="am">AM</option>
               <option value="pm">PM</option>
@@ -527,38 +572,64 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             className={classNames('time-picker-body', {
               ['time-picker-roll']: variant === 'roll',
             })}
+            {...(variant !== 'select' && { role: 'group' })}
+            ref={timePickerBodyRef}
           >
             {variant === 'select' ? (
               <TimePickerSelect />
             ) : (
               <>
                 <CTimePickerRollCol
+                  ariaLabel={ariaSelectHoursLabel}
+                  columnIndex={0}
+                  columnRefs={columnRefs.current}
                   elements={localizedTimePartials && localizedTimePartials.listOfHours}
                   onClick={(index: number) => handleTimeChange('hours', index.toString())}
                   selected={getSelectedHour(date, locale, ampm)}
+                  ref={(node: HTMLDivElement | null) => {
+                    columnRefs.current[0] = node
+                  }}
                 />
                 {minutes && (
                   <CTimePickerRollCol
+                    ariaLabel={ariaSelectMinutesLabel}
+                    columnIndex={1}
+                    columnRefs={columnRefs.current}
                     elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
                     onClick={(index: number) => handleTimeChange('minutes', index.toString())}
                     selected={getSelectedMinutes(date)}
+                    ref={(node: HTMLDivElement | null) => {
+                      columnRefs.current[1] = node
+                    }}
                   />
                 )}
                 {seconds && (
                   <CTimePickerRollCol
+                    ariaLabel={ariaSelectSecondsLabel}
+                    columnIndex={minutes ? 2 : 1}
+                    columnRefs={columnRefs.current}
                     elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
                     onClick={(index: number) => handleTimeChange('seconds', index.toString())}
                     selected={getSelectedSeconds(date)}
+                    ref={(node: HTMLDivElement | null) => {
+                      columnRefs.current[minutes ? 2 : 1] = node
+                    }}
                   />
                 )}
                 {localizedTimePartials && localizedTimePartials.hour12 && (
                   <CTimePickerRollCol
+                    ariaLabel={ariaSelectMeridiemLabel}
+                    columnIndex={(minutes ? 1 : 0) + (seconds ? 1 : 0) + 1}
+                    columnRefs={columnRefs.current}
                     elements={[
                       { value: 'am', label: 'AM' },
                       { value: 'pm', label: 'PM' },
                     ]}
-                    onClick={(value: string) => handleTimeChange('toggle', value)}
+                    onClick={(value: string) => handleTimeChange('meridiem', value)}
                     selected={_ampm}
+                    ref={(node: HTMLDivElement | null) => {
+                      columnRefs.current[(minutes ? 1 : 0) + (seconds ? 1 : 0) + 1] = node
+                    }}
                   />
                 )}
               </>