@coreui/react-pro 4.2.0-beta.0 → 4.2.0

package/src/components/calendar/__tests__/__snapshots__/CCalendar.spec.tsx.snap

@@ -0,0 +1,573 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loads and displays CCalendar component 1`] = `
+<div>
+  <div
+    class="calendar"
+  >
+    <div
+      class="calendar-nav"
+    >
+      <div
+        class="calendar-nav-prev"
+      >
+        <button
+          class="btn btn-transparent btn-sm"
+          type="button"
+        >
+          <span
+            class="calendar-nav-icon calendar-nav-icon-double-prev"
+          />
+        </button>
+        <button
+          class="btn btn-transparent btn-sm"
+          type="button"
+        >
+          <span
+            class="calendar-nav-icon calendar-nav-icon-prev"
+          />
+        </button>
+      </div>
+      <div
+        class="calendar-nav-date"
+      >
+        <button
+          class="btn btn-transparent btn-sm"
+          type="button"
+        >
+          March
+        </button>
+        <button
+          class="btn btn-transparent btn-sm"
+          type="button"
+        >
+          2022
+        </button>
+      </div>
+      <div
+        class="calendar-nav-next"
+      >
+        <button
+          class="btn btn-transparent btn-sm"
+          type="button"
+        >
+          <span
+            class="calendar-nav-icon calendar-nav-icon-next"
+          />
+        </button>
+        <button
+          class="btn btn-transparent btn-sm"
+          type="button"
+        >
+          <span
+            class="calendar-nav-icon calendar-nav-icon-double-next"
+          />
+        </button>
+      </div>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th
+            class="calendar-cell"
+          >
+            <div
+              class="calendar-header-cell-inner"
+            >
+              Mo
+            </div>
+          </th>
+          <th
+            class="calendar-cell"
+          >
+            <div
+              class="calendar-header-cell-inner"
+            >
+              Tu
+            </div>
+          </th>
+          <th
+            class="calendar-cell"
+          >
+            <div
+              class="calendar-header-cell-inner"
+            >
+              We
+            </div>
+          </th>
+          <th
+            class="calendar-cell"
+          >
+            <div
+              class="calendar-header-cell-inner"
+            >
+              Th
+            </div>
+          </th>
+          <th
+            class="calendar-cell"
+          >
+            <div
+              class="calendar-header-cell-inner"
+            >
+              Fr
+            </div>
+          </th>
+          <th
+            class="calendar-cell"
+          >
+            <div
+              class="calendar-header-cell-inner"
+            >
+              Sa
+            </div>
+          </th>
+          <th
+            class="calendar-cell"
+          >
+            <div
+              class="calendar-header-cell-inner"
+            >
+              Su
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td
+            class="calendar-cell previous last"
+            title="2/28/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              28
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/1/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              1
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/2/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              2
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/3/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              3
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/4/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              4
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/5/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              5
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/6/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              6
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td
+            class="calendar-cell"
+            title="3/7/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              7
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/8/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              8
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/9/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              9
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/10/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              10
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/11/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              11
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/12/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              12
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/13/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              13
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td
+            class="calendar-cell"
+            title="3/14/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              14
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/15/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              15
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/16/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              16
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/17/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              17
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/18/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              18
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/19/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              19
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/20/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              20
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td
+            class="calendar-cell"
+            title="3/21/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              21
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/22/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              22
+            </div>
+          </td>
+          <td
+            class="calendar-cell today"
+            title="3/23/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              23
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/24/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              24
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/25/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              25
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/26/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              26
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/27/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              27
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td
+            class="calendar-cell"
+            title="3/28/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              28
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/29/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              29
+            </div>
+          </td>
+          <td
+            class="calendar-cell"
+            title="3/30/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              30
+            </div>
+          </td>
+          <td
+            class="calendar-cell last"
+            title="3/31/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              31
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/1/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              1
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/2/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              2
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/3/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              3
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td
+            class="calendar-cell next"
+            title="4/4/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              4
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/5/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              5
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/6/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              6
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/7/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              7
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/8/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              8
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/9/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              9
+            </div>
+          </td>
+          <td
+            class="calendar-cell next"
+            title="4/10/2022"
+          >
+            <div
+              class="calendar-cell-inner"
+            >
+              10
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;

package/src/components/callout/index.ts

@@ -0,0 +1,3 @@
+import { CCallout } from './CCallout'
+
+export { CCallout }

package/src/components/card/index.ts

@@ -0,0 +1,25 @@
+import { CCard } from './CCard'
+import { CCardBody } from './CCardBody'
+import { CCardFooter } from './CCardFooter'
+import { CCardGroup } from './CCardGroup'
+import { CCardHeader } from './CCardHeader'
+import { CCardImage } from './CCardImage'
+import { CCardImageOverlay } from './CCardImageOverlay'
+import { CCardLink } from './CCardLink'
+import { CCardSubtitle } from './CCardSubtitle'
+import { CCardText } from './CCardText'
+import { CCardTitle } from './CCardTitle'
+
+export {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CCardGroup,
+  CCardHeader,
+  CCardImage,
+  CCardImageOverlay,
+  CCardLink,
+  CCardSubtitle,
+  CCardText,
+  CCardTitle,
+}

package/src/components/carousel/index.ts

@@ -0,0 +1,5 @@
+import { CCarousel } from './CCarousel'
+import { CCarouselCaption } from './CCarouselCaption'
+import { CCarouselItem } from './CCarouselItem'
+
+export { CCarousel, CCarouselCaption, CCarouselItem }

package/src/components/close-button/index.ts

@@ -0,0 +1,3 @@
+import { CCloseButton } from './CCloseButton'
+
+export { CCloseButton }

package/src/components/collapse/CCollapse.tsx

@@ -98,6 +98,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
     return (
       <CSSTransition
         in={visible}
+        nodeRef={collapseRef}
         onEntering={onEntering}
         onEntered={onEntered}
         onExit={onExit}

package/src/components/collapse/index.ts

@@ -0,0 +1,3 @@
+import { CCollapse } from './CCollapse'
+
+export { CCollapse }

package/src/components/{datepicker → date-picker}/CDatePicker.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { CDateRangePicker, CDateRangePickerProps } from '../daterangepicker/CDateRangePicker'
+
+import { CDateRangePicker, CDateRangePickerProps } from '../date-range-picker/CDateRangePicker'
 
 export interface CDatePickerProps
   extends Omit<
@@ -21,7 +22,7 @@ export interface CDatePickerProps
   /**
    * Callback fired when the date changed.
    */
-  onDateChange?: (date: Date | null) => void
+  onDateChange?: (date: Date | null, formatedDate?: string | undefined) => void
 }
 
 export const CDatePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDatePickerProps>(

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

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CDatePicker } from '../CDatePicker'
+
+test('loads and displays CDatePicker component', async () => {
+  const { container } = render(<CDatePicker />)
+  expect(container).toMatchSnapshot()
+})