@coreui/react-pro 5.2.0 → 5.3.0

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)
@@ -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/__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/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,
@@ -442,6 +460,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         <CMultiSelectNativeSelect
           id={id}
           multiple={multiple}
+          name={name}
           options={selected}
           required={required}
           value={
@@ -465,7 +484,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
             className,
           )}
           aria-expanded={_visible}
-          id={id}
           ref={multiSelectForkedRef}
         >
           <div
@@ -564,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,
@@ -575,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/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/__tests__/__snapshots__/CTabPane.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CTabPane customize 1`] = `
 <div>
   <div
-    class="tab-pane fade active show bazinga"
+    class="tab-pane active fade show bazinga"
   >
     Test
   </div>

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

@@ -84,6 +84,12 @@ export interface CTimePickerProps
    * @since 5.0.0
    */
   hours?: number[] | ((hour: number) => number[])
+  /**
+   * Set the id attribute for the input element.
+   *
+   * @since 5.3.0
+   */
+  id?: string
   /**
    * Toggle visibility or set the content of the input indicator.
    */
@@ -108,6 +114,12 @@ export interface CTimePickerProps
    * @since 5.0.0
    */
   minutes?: boolean | number[] | ((minute: number) => number[])
+  /**
+   * Set the name attribute for the input element.
+   *
+   * @since 5.3.0
+   */
+  name?: string
   /**
    * Callback fired when the time changed.
    */
@@ -171,6 +183,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       label,
       locale = 'default',
       minutes = true,
+      name,
       onTimeChange,
       onHide,
       onShow,
@@ -306,6 +319,8 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           autoComplete="off"
           className="time-picker-input"
           disabled={disabled}
+          id={id}
+          name={name}
           onChange={(event) => handleOnChange(event.target.value)}
           placeholder={placeholder}
           readOnly={inputReadOnly}
@@ -460,7 +475,6 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               )}
             </div>
           }
-          id={id}
           onHide={() => {
             setVisible(false)
             onHide && onHide()
@@ -536,6 +550,7 @@ CTimePicker.propTypes = {
   confirmButtonSize: CButton.propTypes?.size,
   confirmButtonVariant: CButton.propTypes?.variant,
   hours: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number.isRequired), PropTypes.func]),
+  id: PropTypes.string,
   inputOnChangeDelay: PropTypes.number,
   locale: PropTypes.string,
   minutes: PropTypes.oneOfType([
@@ -543,6 +558,7 @@ CTimePicker.propTypes = {
     PropTypes.arrayOf(PropTypes.number.isRequired),
     PropTypes.func,
   ]),
+  name: PropTypes.string,
   onTimeChange: PropTypes.func,
   required: PropTypes.bool,
   seconds: PropTypes.oneOfType([

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

@@ -6,7 +6,7 @@ exports[`CToaster customize 1`] = `
     class="toaster toast-container bazinga"
   />
   <button
-    class="btn btn-primary"
+    class="btn"
     type="button"
   >
     Send a toast

package/src/components/tooltip/CTooltip.tsx

@@ -144,6 +144,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
             }
 
             initPopper(togglerRef.current, tooltipRef.current, popperConfig)
+            tooltipRef.current.style.removeProperty('display')
             tooltipRef.current.classList.add('show')
             onShow && onShow()
           }
@@ -155,6 +156,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
           tooltipRef.current.classList.remove('show')
           onHide && onHide()
           executeAfterTransition(() => {
+            if (tooltipRef.current) {
+              tooltipRef.current.style.display = 'none'
+            }
+
             destroyPopper()
             setMounted(false)
           }, tooltipRef.current)
@@ -192,6 +197,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
               id={uID.current}
               ref={forkedRef}
               role="tooltip"
+              style={{
+                display: 'none',
+              }}
               {...rest}
             >
               <div className="tooltip-arrow"></div>

package/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap

@@ -3,6 +3,7 @@
 exports[`CTooltip customize 1`] = `
 <div>
   <a
+    aria-describedby="tooltip97108"
     class="link"
   >
     Test

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

@@ -9,7 +9,7 @@ exports[`CWidgetStatsC customize 1`] = `
       class="card-body"
     >
       <div
-        class="text-end mb-4"
+        class="text-end mb-4 text-white text-opacity-75"
       >
         icon
       </div>