@coreui/react-pro 5.1.0 → 5.3.0

package/src/components/date-picker/CDatePicker.tsx

@@ -22,10 +22,16 @@ export interface CDatePickerProps
   /**
    * The id global attribute defines an identifier (ID) that must be unique in the whole document.
    *
-   * The name attribute for the input element is generated based on the `id` property:
+   * **[Deprecated since v5.3.0]** The name attributes for input element is generated based on this property until you define name prop ex.:
    * - \{id\}-date
    */
   id?: string
+  /**
+   * The name attribute for the input element.
+   *
+   * @since 5.3.0
+   */
+  name?: string
   /**
    * Callback fired when the date changed.
    */
@@ -33,11 +39,12 @@ export interface CDatePickerProps
 }
 
 export const CDatePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDatePickerProps>(
-  ({ date, id, onDateChange, placeholder = 'Select date', ...rest }, ref) => {
+  ({ date, id, name, onDateChange, placeholder = 'Select date', ...rest }, ref) => {
     return (
       <CDateRangePicker
         calendars={1}
         id={id}
+        name={name}
         startDate={date}
         onStartDateChange={onDateChange}
         placeholder={placeholder}
@@ -54,5 +61,7 @@ CDatePicker.displayName = 'CDatePicker'
 CDatePicker.propTypes = {
   ...CDateRangePicker.propTypes,
   date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  id: PropTypes.string,
+  name: PropTypes.string,
   onDateChange: PropTypes.func,
 }

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -12,11 +12,11 @@ import { CTimePicker } from '../time-picker/CTimePicker'
 
 import { useDebouncedCallback } from '../../hooks'
 import { Colors } from '../../types'
-import { getLocalDateFromString } from './utils'
+import { getInputIdOrName, getLocalDateFromString } from './utils'
 
 export interface CDateRangePickerProps
-  extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
-    Omit<CPickerProps, 'placeholder'>,
+  extends Omit<CFormControlWrapperProps, 'floatingLabel' | 'id'>,
+    Omit<CPickerProps, 'placeholder' | 'id'>,
     Omit<CCalendarProps, 'onDayHover' | 'onCalendarDateChange'> {
   /**
    * The number of calendars that render on desktop devices.
@@ -85,13 +85,13 @@ export interface CDateRangePickerProps
    */
   confirmButtonVariant?: 'outline' | 'ghost'
   /**
-   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   * The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately.
    *
-   * The name attributes for input elements are generated based on the `id` property:
+   * **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.:
    * - \{id\}-start-date
    * - \{id\}-end-date
    */
-  id?: string
+  id?: string | [string, string]
   /**
    * Toggle visibility or set the content of the input indicator.
    */
@@ -118,6 +118,18 @@ export interface CDateRangePickerProps
    * Toggle the readonly state for the component.
    */
   inputReadOnly?: boolean
+  /**
+   * The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately.
+   *
+   * Example for single string: 'date-input'
+   * Result: 'date-input-start-date', 'date-input-end-date'
+   *
+   * Example for array: ['start-date-input', 'end-date-input']
+   * Result: 'start-date-input', 'end-date-input'
+   *
+   * @since 5.3.0
+   */
+  name?: string | [string, string]
   /**
    * Specifies short hints that are visible in start date and end date inputs.
    */
@@ -223,6 +235,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       locale = 'default',
       maxDate,
       minDate,
+      name,
       navigation,
       navYearFirst,
       onEndDateChange,
@@ -430,7 +443,11 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             hover: inputStartHoverValue,
           })}
           disabled={disabled}
-          {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
+          {...(id && { id: getInputIdOrName(id, range, 'start') })}
+          {...(name && { name: getInputIdOrName(name, range, 'start') })}
+          {...(id &&
+            !Array.isArray(id) &&
+            !name && { name: range ? `${id}-start-date` : `${id}-date` })} // TODO: remove in v6
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
           readOnly={inputReadOnly}
           required={required}
@@ -448,7 +465,9 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               hover: inputEndHoverValue,
             })}
             disabled={disabled}
-            {...(id && { name: `${id}-end-date` })}
+            {...(id && { id: getInputIdOrName(id, range, 'end') })}
+            {...(name && { name: getInputIdOrName(name, range, 'end') })}
+            {...(id && !Array.isArray(id) && !name && { name: `${id}-end-date` })} // TODO: remove in v6
             placeholder={placeholder[1]}
             readOnly={inputReadOnly}
             required={required}
@@ -480,7 +499,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
         feedback={feedback}
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
-        id={id}
+        {...(id && !Array.isArray(id) && { id: id })}
         invalid={isValid === false ? true : false}
         label={label}
         text={text}
@@ -547,7 +566,6 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               )}
             </div>
           }
-          id={id}
           toggler={toggler ?? InputGroup()}
           onHide={() => {
             setVisible(false)
@@ -612,7 +630,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             />
             {timepicker && (
               <div className="date-picker-timepickers">
-                {isMobile || (range && calendars === 1) ? (
+                {(isMobile && range) || (range && calendars === 1) ? (
                   <>
                     <CTimePicker
                       container="inline"
@@ -687,12 +705,13 @@ CDateRangePicker.propTypes = {
   confirmButtonColor: CButton.propTypes?.color,
   confirmButtonSize: CButton.propTypes?.size,
   confirmButtonVariant: CButton.propTypes?.variant,
-  id: PropTypes.string,
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   inputDateFormat: PropTypes.func,
   inputDateParse: PropTypes.func,
   inputOnChangeDelay: PropTypes.number,
   inputReadOnly: PropTypes.bool,
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   placeholder: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string.isRequired),

package/src/components/date-range-picker/utils.ts

@@ -1,3 +1,19 @@
+export const getInputIdOrName = (
+  attribute: string | [string, string],
+  range: boolean,
+  position?: 'start' | 'end',
+): string => {
+  if (range && !Array.isArray(attribute)) {
+    return `${attribute}-${position}-date`
+  }
+
+  if (Array.isArray(attribute)) {
+    return position === 'start' ? attribute[0] : attribute[1]
+  }
+
+  return attribute
+}
+
 export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
   if (!Number.isNaN(Date.parse(string))) {
     return new Date(Date.parse(string))

package/src/components/dropdown/CDropdown.tsx

@@ -15,10 +15,10 @@ import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef, usePopper } from '../../hooks'
 import { placementPropType } from '../../props'
 import type { Placements } from '../../types'
-import { isRTL } from '../../utils'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 import type { Alignments, Directions } from './types'
-import { getNextActiveElement, getPlacement } from './utils'
+import { getPlacement } from './utils'
 
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**

package/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CDropdownToggle component', async () => {
 
 test('CDropdownToggle customize', async () => {
   const { container } = render(
-    <CDropdownToggle caret={true} split={true} trigger="focus">
+    <CDropdownToggle caret={true} color="primary" split={true} trigger="focus">
       Test
     </CDropdownToggle>,
   )

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -17,7 +17,7 @@ exports[`CDropdown example 1`] = `
   >
     <button
       aria-expanded="false"
-      class="btn btn-primary dropdown-toggle"
+      class="btn dropdown-toggle"
       tabindex="0"
       type="button"
     >

package/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`CDropdownToggle customize 1`] = `
 exports[`loads and displays CDropdownToggle component 1`] = `
 <div>
   <button
-    class="btn btn-primary dropdown-toggle"
+    class="btn dropdown-toggle"
     tabindex="0"
     type="button"
   >

package/src/components/dropdown/utils.ts

@@ -19,28 +19,6 @@ export const getAlignmentClassNames = (alignment: Alignments) => {
   return classNames
 }
 
-export const getNextActiveElement = (
-  list: HTMLElement[],
-  activeElement: HTMLElement,
-  shouldGetNext: boolean,
-  isCycleAllowed: boolean,
-) => {
-  const listLength = list.length
-  let index = list.indexOf(activeElement)
-
-  if (index === -1) {
-    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
-  }
-
-  index += shouldGetNext ? 1 : -1
-
-  if (isCycleAllowed) {
-    index = (index + listLength) % listLength
-  }
-
-  return list[Math.max(0, Math.min(index, listLength - 1))]
-}
-
 export const getPlacement = (
   placement: Placement,
   direction: string | undefined,

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CModal } from '../../../index'
 
 test('loads and displays CModal component', async () => {

package/src/components/multi-select/CMultiSelect.tsx

@@ -53,10 +53,10 @@ export interface CMultiSelectProps
    */
   disabled?: boolean
   /**
-   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   * Set the id attribute for the native select element.
    *
-   * The name and id attributes for the native select element are generated based on the `id` property:
-   * - <select id="\{id\}-multi-select" name="\{id\}-multi-select" />
+   * **[Deprecated since v5.3.0]** The name attribute for the native select element is generated based on the `id` property:
+   * - `<select name="\{id\}-multi-select" />`
    */
   id?: string
   /**
@@ -69,6 +69,12 @@ export interface CMultiSelectProps
    * It specifies that multiple options can be selected at once.
    */
   multiple?: boolean
+  /**
+   * The name attribute for the select element.
+   *
+   * @since 5.3.0
+   */
+  name?: string
   /**
    * Execute a function when a user changes the selected option.
    */
@@ -119,6 +125,12 @@ export interface CMultiSelectProps
    * When it is present, it indicates that the user must choose a value before submitting the form.
    */
   required?: boolean
+  /**
+   * Determines whether the selected options should be cleared when the options list is updated. When set to true, any previously selected options will be reset whenever the options list undergoes a change. This ensures that outdated selections are not retained when new options are provided.
+   *
+   * @since 5.3.0
+   */
+  resetSelectionOnOptionsChange?: boolean
   /**
    * Enables search input element.
    */
@@ -176,11 +188,12 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       feedback,
       feedbackInvalid,
       feedbackValid,
-      loading,
-      multiple = true,
       id,
       invalid,
       label,
+      loading,
+      multiple = true,
+      name,
       onChange,
       onFilterChange,
       onHide,
@@ -192,6 +205,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       optionsGroupsTemplate,
       placeholder = 'Select...',
       required,
+      resetSelectionOnOptionsChange = false,
       search = true,
       searchNoResultsLabel = 'No results found',
       selectAll = true,
@@ -273,6 +287,10 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     useEffect(() => {
       setOptions(options)
 
+      if (resetSelectionOnOptionsChange) {
+        return setSelected([])
+      }
+
       const _selected = flattenedOptions.filter((option: Option) => option.selected === true)
       const deselected = flattenedOptions.filter(
         (option: Option) => option.selected === false,
@@ -311,6 +329,11 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       return () => {
         onHide && onHide()
 
+        setSearchValue('')
+        if (searchRef.current) {
+          searchRef.current.value = ''
+        }
+
         window.removeEventListener('mouseup', handleMouseUp)
         window.removeEventListener('keyup', handleKeyUp)
 
@@ -437,6 +460,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         <CMultiSelectNativeSelect
           id={id}
           multiple={multiple}
+          name={name}
           options={selected}
           required={required}
           value={
@@ -460,7 +484,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
             className,
           )}
           aria-expanded={_visible}
-          id={id}
           ref={multiSelectForkedRef}
         >
           <div
@@ -559,6 +582,7 @@ CMultiSelect.propTypes = {
   disabled: PropTypes.bool,
   loading: PropTypes.bool,
   multiple: PropTypes.bool,
+  name: PropTypes.string,
   onChange: PropTypes.func,
   onFilterChange: PropTypes.func,
   onHide: PropTypes.func,
@@ -570,6 +594,7 @@ CMultiSelect.propTypes = {
   optionsGroupsTemplate: PropTypes.func,
   placeholder: PropTypes.string,
   required: PropTypes.bool,
+  resetSelectionOnOptionsChange: PropTypes.bool,
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'external'>(['external'])]),
   searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   selectAll: PropTypes.bool,

package/src/components/multi-select/CMultiSelectNativeSelect.tsx

@@ -26,12 +26,12 @@ const createNativeOptions = (options: Option[]) =>
 export const CMultiSelectNativeSelect = forwardRef<
   HTMLSelectElement,
   CMultiSelectNativeSelectProps
->(({ id, options, ...rest }, ref) => {
+>(({ id, name, options, ...rest }, ref) => {
   return (
     <select
-      className="multi-select-new"
-      {...(id && { id: `${id}-multi-select` })}
-      {...(id && { name: `${id}-multi-select` })}
+      id={id}
+      {...(id && !name && { name: `${id}-multi-select` })} // TODO: remove in v6
+      {...(name && { name: name })}
       tabIndex={-1}
       style={{ display: 'none' }}
       {...rest}
@@ -43,6 +43,8 @@ export const CMultiSelectNativeSelect = forwardRef<
 })
 
 CMultiSelectNativeSelect.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
   options: PropTypes.array,
   value: PropTypes.oneOfType([
     PropTypes.number,

package/src/components/multi-select/CMultiSelectSelection.tsx

@@ -52,6 +52,7 @@ export const CMultiSelectSelection = forwardRef<HTMLSpanElement, CMultiSelectSel
                   {!option.disabled && (
                     <button
                       className="form-multi-select-tag-delete"
+                      type="button"
                       aria-label="Close"
                       onClick={() => onRemove && onRemove(option)}
                     />

package/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap

@@ -2,35 +2,39 @@
 
 exports[`CNavItem customize 1`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 
 exports[`CNavItem customize 2`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 

package/src/components/popover/CPopover.tsx

@@ -149,6 +149,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
             }
 
             initPopper(togglerRef.current, popoverRef.current, popperConfig)
+            popoverRef.current.style.removeProperty('display')
             popoverRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -160,6 +161,10 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
           popoverRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (popoverRef.current) {
+              popoverRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, popoverRef.current)
@@ -193,6 +198,9 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="popover-arrow"></div>

package/src/components/popover/__tests__/CPopover.spec.tsx

@@ -6,7 +6,7 @@ import { CPopover, CButton } from '../../../index'
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
   )
   expect(container).toMatchSnapshot()
@@ -17,7 +17,7 @@ test('CPopover customize', async () => {
   let arr, element
   const { container } = render(
     <CPopover content="content" title="title" trigger="click" placement="right">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
     { container: document.body },
   )

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -3,11 +3,33 @@
 exports[`CPopover customize 1`] = `
 <body>
   <button
+    aria-describedby="popover744956"
     class="btn btn-primary"
     type="button"
   >
     Test
   </button>
+  <div
+    class="popover bs-popover-auto fade show"
+    id="popover744956"
+    role="tooltip"
+    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
+  >
+    <div
+      class="popover-arrow"
+      style="position: absolute;"
+    />
+    <div
+      class="popover-header"
+    >
+      title
+    </div>
+    <div
+      class="popover-body"
+    >
+      content
+    </div>
+  </div>
 </body>
 `;
 

package/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.tsx.snap

@@ -2,21 +2,21 @@
 
 exports[`CSidebarBrand customize 1`] = `
 <div>
-  <div
+  <a
     class="sidebar-brand bazinga"
   >
     Test
-  </div>
+  </a>
 </div>
 `;
 
 exports[`loads and displays CSidebarBrand component 1`] = `
 <div>
-  <div
+  <a
     class="sidebar-brand"
     color="primary"
   >
     Test
-  </div>
+  </a>
 </div>
 `;

package/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.tsx.snap

@@ -4,7 +4,9 @@ exports[`CSidebarNav customize 1`] = `
 <div>
   <ul
     class="sidebar-nav bazinga"
-  />
+  >
+    Test
+  </ul>
 </div>
 `;
 
@@ -12,6 +14,8 @@ exports[`loads and displays CSidebarNav component 1`] = `
 <div>
   <ul
     class="sidebar-nav"
-  />
+  >
+    Test
+  </ul>
 </div>
 `;

package/src/components/tabs/CTab.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { TabsContext } from './CTabs'
+
+export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Item key.
+   */
+  itemKey: number | string
+}
+
+export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
+  ({ children, className, itemKey, ...rest }, ref) => {
+    const { _activeItemKey, setActiveItemKey, id } = useContext(TabsContext)
+
+    const isActive = () => itemKey === _activeItemKey
+
+    return (
+      <button
+        className={classNames(
+          'nav-link',
+          {
+            active: isActive(),
+          },
+          className,
+        )}
+        id={`${id}${itemKey}-tab`}
+        onClick={() => setActiveItemKey(itemKey)}
+        onFocus={() => setActiveItemKey(itemKey)}
+        role="tab"
+        tabIndex={isActive() ? 0 : -1}
+        type="button"
+        aria-controls={`${id}${itemKey}-tab-pane`}
+        aria-selected={isActive()}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+
+CTab.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+}
+
+CTab.displayName = 'CTab'