@coreui/react-pro 5.2.0 → 5.4.0

package/src/components/modal/CModal.tsx

@@ -31,6 +31,12 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   *
+   * @since 5.3.0
+   */
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * @ignore
    */
@@ -38,7 +44,7 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Puts the focus on the modal when shown.
    *
-   * @since v4.10.0
+   * @since 4.10.0
    */
   focus?: boolean
   /**
@@ -101,6 +107,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       alignment,
       backdrop = true,
       className,
+      container,
       duration = 150,
       focus = true,
       fullscreen,
@@ -223,7 +230,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           timeout={transition ? duration : 0}
         >
           {(state) => (
-            <CConditionalPortal portal={portal}>
+            <CConditionalPortal container={container} portal={portal}>
               <CModalContext.Provider value={contextValues}>
                 <div
                   className={classNames(
@@ -259,7 +266,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           )}
         </Transition>
         {backdrop && (
-          <CConditionalPortal portal={portal}>
+          <CConditionalPortal container={container} portal={portal}>
             <CBackdrop visible={_visible} />
           </CConditionalPortal>
         )}
@@ -273,6 +280,7 @@ CModal.propTypes = {
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
+  container: PropTypes.any, // HTMLElement
   duration: PropTypes.number,
   focus: PropTypes.bool,
   fullscreen: PropTypes.oneOfType([

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

@@ -22,9 +22,9 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   /**
    * Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
    *
-   * @since v4.11.0
+   * @since 4.11.0
    */
-  container?: Element | (() => Element | null) | null
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * Content node for your component.
    */
@@ -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

@@ -22,9 +22,9 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   /**
    * Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
    *
-   * @since v4.11.0
+   * @since 4.11.0
    */
-  container?: Element | (() => Element | null) | null
+  container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   /**
    * Content node for your component.
    */
@@ -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>