@coreui/react-pro 4.1.4 → 4.2.0-rc.0

package/dist/utils/calendar.d.ts

@@ -0,0 +1,23 @@
+export declare const convertToLocalDate: (d: Date, locale: string, options?: {}) => string;
+export declare const convertToLocalTime: (d: Date, locale: string, options?: {}) => string;
+export declare const createGroupsInArray: (arr: any[], numberOfGroups: number) => any[][];
+export declare const getCurrentYear: () => number;
+export declare const getCurrentMonth: () => number;
+export declare const getLocalDateFromString: (string: string, locale: string, time?: boolean | undefined) => Date | undefined;
+export declare const getMonthName: (month: number, locale: string) => string;
+export declare const getMonthsNames: (locale: string) => string[];
+export declare const getYears: (year: number) => number[];
+export declare const getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
+    date: Date;
+    month: string;
+}[][];
+export declare const isDisableDateInRange: (startDate?: Date | null | undefined, endDate?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean;
+export declare const isDateDisabled: (date: Date, min?: Date | null | undefined, max?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean | undefined;
+export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isLastDayOfMonth: (date: Date) => boolean;
+export declare const isSameDateAs: (date: Date | null, date2: Date | null) => boolean;
+export declare const isStartDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
+export declare const isToday: (date: Date) => boolean;
+export declare const isValidDate: (date: string) => number | false;

package/dist/utils/hooks/useStateWithCallback.d.ts

@@ -1 +1,2 @@
-export declare const useStateWithCallback: (initialState: any, callback: any) => any[];
+import { Dispatch, SetStateAction } from 'react';
+export declare const useStateWithCallback: <S>(initialState: S, handler?: ((prevState: S) => void) | undefined) => [S, Dispatch<SetStateAction<S>>];

package/dist/utils/time.d.ts

@@ -0,0 +1,21 @@
+export declare const convert12hTo24h: (abbr: 'am' | 'pm', hour: number) => number;
+export declare const convert24hTo12h: (hour: number) => number;
+export declare const convertTimeToDate: (time: Date | string | null | undefined) => Date | null;
+export declare const getAmPm: (date: Date, locale: string) => "am" | "pm";
+export declare const getListOfHours: (locale: string) => {
+    value: number;
+    label: string;
+}[];
+export declare const getListOfMinutes: (locale: string, valueAsString?: boolean) => {
+    value: string | number;
+    label: string;
+}[];
+export declare const getListOfSeconds: (locale: string, valueAsString?: boolean) => {
+    value: string | number;
+    label: string;
+}[];
+export declare const getSelectedHour: (date: Date | null, locale: string) => number | "";
+export declare const getSelectedMinutes: (date: Date | null) => number | "";
+export declare const getSelectedSeconds: (date: Date | null) => number | "";
+export declare const isAmPm: (locale: string) => boolean;
+export declare const isValidTime: (time: string) => number | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.1.4",
+  "version": "4.2.0-rc.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,26 +35,27 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@coreui/icons-pro": "^2.0.3",
+    "@coreui/icons-pro": "^3.0.0-0",
     "@coreui/icons-react": "^2.0.0",
-    "@popperjs/core": "^2.11.2",
-    "@rollup/plugin-commonjs": "^21.0.1",
+    "@popperjs/core": "^2.11.5",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@rollup/plugin-typescript": "^8.3.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.4",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.15",
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
+    "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.67.0",
+    "rollup": "^2.70.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.3"
   },
   "peerDependencies": {
     "react": "^17",

package/src/components/Types.tsx

@@ -133,6 +133,6 @@ export const textColorsPropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
-export type Triggers = 'hover' | 'focus' | 'click' | 'click-init'
+export type Triggers = 'hover' | 'focus' | 'click'
 
-export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click', 'click-init'])
+export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click'])

package/src/components/accordion/CAccordionButton.tsx

@@ -19,10 +19,11 @@ export const CAccordionButton = forwardRef<HTMLButtonElement, CAccordionButtonPr
 
     return (
       <button
+        type="button"
         className={_className}
-        {...rest}
         aria-expanded={!visible}
         onClick={() => setVisible(!visible)}
+        {...rest}
         ref={ref}
       >
         {children}

package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap

@@ -5,6 +5,7 @@ exports[`CAccordionButton customize 1`] = `
   <button
     aria-expanded="true"
     class="accordion-button collapsed bazinga"
+    type="button"
   >
     Test
   </button>
@@ -16,6 +17,7 @@ exports[`loads and displays CAccordionButton component 1`] = `
   <button
     aria-expanded="true"
     class="accordion-button collapsed"
+    type="button"
   >
     Test
   </button>

package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap

@@ -8,6 +8,7 @@ exports[`CAccordionHeader customize 1`] = `
     <button
       aria-expanded="true"
       class="accordion-button collapsed"
+      type="button"
     >
       Test
     </button>
@@ -23,6 +24,7 @@ exports[`loads and displays CAccordionHeader component 1`] = `
     <button
       aria-expanded="true"
       class="accordion-button collapsed"
+      type="button"
     >
       Test
     </button>

package/src/components/accordion/index.ts

@@ -0,0 +1,15 @@
+import { CAccordion } from './CAccordion'
+import { CAccordionBody } from './CAccordionBody'
+import { CAccordionButton } from './CAccordionButton'
+import { CAccordionCollapse } from './CAccordionCollapse'
+import { CAccordionHeader } from './CAccordionHeader'
+import { CAccordionItem } from './CAccordionItem'
+
+export {
+  CAccordion,
+  CAccordionBody,
+  CAccordionButton,
+  CAccordionCollapse,
+  CAccordionHeader,
+  CAccordionItem,
+}

package/src/components/alert/CAlert.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
@@ -6,6 +6,8 @@ import { Transition } from 'react-transition-group'
 import { Colors, colorPropType } from '../Types'
 import { CCloseButton } from '../close-button/CCloseButton'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.
@@ -49,6 +51,8 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
     },
     ref,
   ) => {
+    const alertRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, alertRef)
     const [_visible, setVisible] = useState(visible)
 
     useEffect(() => {
@@ -69,7 +73,14 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
     }
 
     return (
-      <Transition in={_visible} mountOnEnter onExit={onClose} timeout={150} unmountOnExit>
+      <Transition
+        in={_visible}
+        mountOnEnter
+        nodeRef={alertRef}
+        onExit={onClose}
+        timeout={150}
+        unmountOnExit
+      >
         {(state) => {
           const transitionClass = getTransitionClass(state)
           return (
@@ -77,7 +88,7 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
               className={classNames(_className, transitionClass)}
               role="alert"
               {...rest}
-              ref={ref}
+              ref={forkedRef}
             >
               {children}
               {dismissible && <CCloseButton onClick={() => setVisible(false)} />}

package/src/components/alert/index.ts

@@ -0,0 +1,5 @@
+import { CAlert } from './CAlert'
+import { CAlertHeading } from './CAlertHeading'
+import { CAlertLink } from './CAlertLink'
+
+export { CAlert, CAlertHeading, CAlertLink }

package/src/components/avatar/index.ts

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

package/src/components/backdrop/CBackdrop.tsx

@@ -1,8 +1,10 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, useRef } from 'react'
 import { Transition } from 'react-transition-group'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { useForkedRef } from '../../utils/hooks'
+
 export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -16,6 +18,9 @@ export interface CBackdropProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
   ({ className = 'modal-backdrop', visible, ...rest }, ref) => {
+    const backdropRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, backdropRef)
+
     const _className = classNames(className, 'fade')
 
     const getTransitionClass = (state: string) => {
@@ -23,10 +28,12 @@ export const CBackdrop = forwardRef<HTMLDivElement, CBackdropProps>(
     }
 
     return (
-      <Transition in={visible} mountOnEnter timeout={150} unmountOnExit>
+      <Transition in={visible} mountOnEnter nodeRef={backdropRef} timeout={150} unmountOnExit>
         {(state) => {
           const transitionClass = getTransitionClass(state)
-          return <div className={classNames(_className, transitionClass)} {...rest} ref={ref} />
+          return (
+            <div className={classNames(_className, transitionClass)} {...rest} ref={forkedRef} />
+          )
         }}
       </Transition>
     )

package/src/components/backdrop/index.ts

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

package/src/components/badge/index.ts

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

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,4 @@
+import { CBreadcrumb } from './CBreadcrumb'
+import { CBreadcrumbItem } from './CBreadcrumbItem'
+
+export { CBreadcrumb, CBreadcrumbItem }

package/src/components/button/index.ts

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

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

@@ -0,0 +1,4 @@
+import { CButtonToolbar } from './CButtonToolbar'
+import { CButtonGroup } from './CButtonGroup'
+
+export { CButtonToolbar, CButtonGroup }