@coreui/react-pro 4.9.0-next.1 → 4.10.0

package/src/components/tooltip/CTooltip.tsx

@@ -80,16 +80,6 @@ export const CTooltip: FC<CTooltipProps> = ({
     setVisible(visible)
   }, [visible])
 
-  const getTransitionClass = (state: string) => {
-    return state === 'entering'
-      ? 'fade'
-      : state === 'entered'
-      ? 'fade show'
-      : state === 'exiting'
-      ? 'fade'
-      : 'fade'
-  }
-
   return (
     <>
       {React.cloneElement(children as React.ReactElement<any>, {
@@ -120,28 +110,27 @@ export const CTooltip: FC<CTooltipProps> = ({
             }}
             unmountOnExit
           >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return (
-                <div
-                  className={classNames(
-                    `tooltip bs-tooltip-${
-                      placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                    }`,
-                    className,
-                    transitionClass,
-                  )}
-                  ref={setPopperElement}
-                  role="tooltip"
-                  style={styles.popper}
-                  {...attributes.popper}
-                  {...rest}
-                >
-                  <div className="tooltip-arrow" style={styles.arrow} ref={setArrowElement}></div>
-                  <div className="tooltip-inner">{content}</div>
-                </div>
-              )
-            }}
+            {(state) => (
+              <div
+                className={classNames(
+                  'tooltip',
+                  `bs-popover-${placement.replace('left', 'start').replace('right', 'end')}`,
+                  'fade',
+                  {
+                    show: state === 'entered',
+                  },
+                  className,
+                )}
+                ref={setPopperElement}
+                role="tooltip"
+                style={styles.popper}
+                {...attributes.popper}
+                {...rest}
+              >
+                <div className="tooltip-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                <div className="tooltip-inner">{content}</div>
+              </div>
+            )}
           </Transition>,
           document.body,
         )}

package/src/components/virtual-scroller/CVirtualScroller.tsx

@@ -39,7 +39,7 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
       virtualScrollRef.current && virtualScrollRef.current.scrollTop
 
       virtualScrollRef.current &&
-        setViewportPadding(parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop))
+        setViewportPadding(Number.parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop))
     })
 
     useEffect(() => {
@@ -65,11 +65,9 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
       onScroll && onScroll(_currentItemIndex)
     }
 
-    const _className = classNames('virtual-scroller', className)
-
     return (
       <div
-        className={_className}
+        className={classNames('virtual-scroller', className)}
         onScroll={(event: UIEvent<HTMLDivElement>) =>
           handleScroll((event.target as HTMLDivElement).scrollTop)
         }
@@ -108,8 +106,8 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
                   node.offsetHeight &&
                   setItemHeight(
                     node.offsetHeight +
-                      parseFloat(getComputedStyle(node).marginTop) +
-                      parseFloat(getComputedStyle(node).marginBottom),
+                      Number.parseFloat(getComputedStyle(node).marginTop) +
+                      Number.parseFloat(getComputedStyle(node).marginBottom),
                   ),
               })
             }

package/src/components/widgets/CWidgetStatsA.tsx

@@ -38,13 +38,15 @@ export interface CWidgetStatsAProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
   ({ action, chart, className, color, title, value, ...rest }, ref) => {
-    const _className = classNames(
-      { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
-      className,
-    )
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard
+        className={classNames(
+          { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         <CCardBody className="pb-0 d-flex justify-content-between align-items-start">
           <div>
             {value && <div className="fs-4 fw-semibold">{value}</div>}

package/src/components/widgets/CWidgetStatsD.tsx

@@ -40,17 +40,16 @@ export interface CWidgetStatsDProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
   ({ className, chart, color, icon, values, ...rest }, ref) => {
-    const _className = classNames(className)
-    const classNameHeader = classNames(
-      'position-relative d-flex justify-content-center align-items-center',
-      {
-        [`bg-${color}`]: color,
-      },
-    )
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
-        <CCardHeader className={classNameHeader}>
+      <CCard className={className} {...rest} ref={ref}>
+        <CCardHeader
+          className={classNames(
+            'position-relative d-flex justify-content-center align-items-center',
+            {
+              [`bg-${color}`]: color,
+            },
+          )}
+        >
           {icon}
           {chart}
         </CCardHeader>

package/src/components/widgets/CWidgetStatsE.tsx

@@ -25,10 +25,8 @@ export interface CWidgetStatsEProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
   ({ chart, className, title, value, ...rest }, ref) => {
-    const _className = classNames(className)
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard className={classNames(className)} {...rest} ref={ref}>
         <CCardBody className="text-center">
           {title && (
             <div className="text-medium-emphasis small text-uppercase fw-semibold">{title}</div>

package/src/components/widgets/CWidgetStatsF.tsx

@@ -1,6 +1,5 @@
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 
 import { CCard, CCardBody, CCardFooter } from '../card'
 
@@ -42,10 +41,8 @@ export interface CWidgetStatsFProps extends Omit<HTMLAttributes<HTMLDivElement>,
 
 export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
   ({ className, color, footer, icon, padding = true, title, value, ...rest }, ref) => {
-    const _className = classNames(className)
-
     return (
-      <CCard className={_className} {...rest} ref={ref}>
+      <CCard className={className} {...rest} ref={ref}>
         <CCardBody className={`d-flex align-items-center ${padding === false && 'p-0'}`}>
           <div className={`me-3 text-white bg-${color} ${padding ? 'p-3' : 'p-4'}`}>{icon}</div>
           <div>

package/dist/components/Types.d.ts

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-export type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
-export declare const colorPropType: PropTypes.Requireable<string>;
-export type Gradients = 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient';
-export declare const gradientsPropType: PropTypes.Requireable<string>;
-export type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | undefined;
-export declare const placementPropType: PropTypes.Requireable<Placements>;
-export type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
-export declare const shapePropType: PropTypes.Requireable<string>;
-export type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
-export declare const textColorsPropType: PropTypes.Requireable<string>;
-export type Triggers = 'hover' | 'focus' | 'click';
-export declare const triggerPropType: PropTypes.Requireable<Triggers>;

package/dist/components/multi-select/CMultiSelectCleaner.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const CMultiSelectCleaner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/multi-select/CMultiSelectSearchInput.d.ts

@@ -1,5 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-export interface CMultiSelectSearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
-    placeholder?: string;
-}
-export declare const CMultiSelectSearchInput: React.ForwardRefExoticComponent<CMultiSelectSearchInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/pagination/CSmartPagination.d.ts

@@ -1,80 +0,0 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
-export interface CSmartPaginationProps extends HTMLAttributes<HTMLUListElement> {
-    /**
-     * A string of all className you want applied to the base component. [docs]
-     */
-    className?: string;
-    /**
-     * Current page number. [docs]
-     *
-     * @default 1
-     */
-    activePage?: number;
-    /**
-     * Show/hide dots. [docs]
-     *
-     * @default true
-     */
-    dots?: boolean;
-    /**
-     * Show/hide arrows. [docs]
-     *
-     * @default true
-     */
-    arrows?: boolean;
-    /**
-     * Show double arrows buttons. [docs]
-     *
-     * @default doubleArrows
-     */
-    doubleArrows?: boolean;
-    /**
-     * The content of 'firstButton' button. [docs]
-     *
-     * @default '<React.Fragment>&laquo;</React.Fragment>''
-     */
-    firstButton?: ReactNode | string;
-    /**
-     * The content of 'previousButton' button. [docs]
-     *
-     * @default '<React.Fragment>&lsaquo;</React.Fragment>'
-     */
-    previousButton?: ReactNode | string;
-    /**
-     * The content of 'nextButton' button. [docs]
-     *
-     * @default '<React.Fragment>&rsaquo;</React.Fragment>''
-     */
-    nextButton?: ReactNode | string;
-    /**
-     * The content of 'lastButton' button. [docs]
-     *
-     * @default '<React.Fragment>&raquo;</React.Fragment>'
-     */
-    lastButton?: ReactNode | string;
-    /**
-     * Size of pagination, valid values: 'sm', 'lg'. [docs]
-     */
-    size?: 'sm' | 'lg';
-    /**
-     * Horizontall align. [docs]
-     *
-     * @default 'start'
-     */
-    align?: 'start' | 'center' | 'end';
-    /**
-     * Maximum items number. [docs]
-     *
-     * @default 5
-     */
-    limit?: number;
-    /**
-     * Number of pages. [docs]
-     */
-    pages: number;
-    /**
-     * On active page change callback. [docs]
-     */
-    onActivePageChange: (a: number, b?: boolean) => void;
-}
-export declare const CSmartPagination: React.ForwardRefExoticComponent<CSmartPaginationProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/time-picker/CTimePicker copy.d.ts

@@ -1,46 +0,0 @@
-import React, { ReactNode } from 'react';
-import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
-import { CPickerProps } from './../picker/CPicker';
-export interface CTimePickerProps extends Omit<CFormControlWrapperProps, 'floatingLabel'>, Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant' | 'onChange'> {
-    /**
-     * A string of all className you want applied to the component.
-     */
-    className?: string;
-    /**
-     * Toggle visibility or set the content of the cleaner button.
-     */
-    cleaner?: ReactNode | boolean;
-    /**
-     * Toggle visibility or set the content of the input indicator.
-     */
-    indicator?: ReactNode | boolean;
-    /**
-     * Toggle the readonly state for the component.
-     */
-    inputReadOnly?: boolean;
-    /**
-     * Sets the default locale for components. If not set, it is inherited from the browser.
-     */
-    locale?: string;
-    /**
-     * Callback fired when the time changed.
-     */
-    onTimeChange?: (timeString: string | null, localeTimeString?: string, date?: Date) => void;
-    /**
-     * Specifies a short hint that is visible in the input.
-     */
-    placeholder?: string;
-    /**
-     * Size the component small or large.
-     */
-    size?: 'sm' | 'lg';
-    /**
-     * Initial selected time.
-     */
-    time?: Date | string | null;
-    /**
-     * Set the time picker variant to a roll or select.
-     */
-    variant?: 'roll' | 'select';
-}
-export declare const CTimePicker: React.ForwardRefExoticComponent<CTimePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

package/dist/utils/calendar.d.ts

@@ -1,23 +0,0 @@
-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) => 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, endDate?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean;
-export declare const isDateDisabled: (date: Date, min?: Date | null, max?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => 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/getNextSibling.d.ts

@@ -1,2 +0,0 @@
-declare const getNextSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;
-export default getNextSibling;

package/dist/utils/getPreviousSibling.d.ts

@@ -1,2 +0,0 @@
-declare const getPreviousSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;
-export default getPreviousSibling;

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

@@ -1,3 +0,0 @@
-import { useForkedRef } from './useForkedRef';
-import { useStateWithCallback } from './useStateWithCallback';
-export { useForkedRef, useStateWithCallback };

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export type AssignableRef<ValueType> = {
-    bivarianceHack(instance: ValueType | null): void;
-}['bivarianceHack'] | React.MutableRefObject<ValueType | null>;
-export declare function useForkedRef<RefValueType = any>(...refs: (AssignableRef<RefValueType> | null | undefined)[]): ((node: any) => void) | null;
-export declare function assignRef<RefValueType = any>(ref: AssignableRef<RefValueType> | null | undefined, value: any): void;
-export declare function isFunction(value: any): value is Function;

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

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

package/dist/utils/isVisible.d.ts

@@ -1,2 +0,0 @@
-declare const isVisible: (element: HTMLElement) => boolean;
-export default isVisible;

package/dist/utils/time.d.ts

@@ -1,21 +0,0 @@
-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, ampm?: 'auto' | boolean) => {
-    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, ampm?: 'auto' | boolean) => 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;