@coreui/react-pro 4.9.0 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -84,6 +84,12 @@ export interface CDateRangePickerProps
    * Set the ranges button variant to an outlined button or a ghost button.
    */
   rangesButtonsVariant?: 'outline' | 'ghost'
+  /**
+   * When present, it specifies that date must be filled out before submitting the form.
+   * 
+   * @since 4.10.0
+   */
+  required?: boolean
   /**
    * Default icon or character character that separates two dates.
    */
@@ -159,6 +165,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       rangesButtonsColor = 'secondary',
       rangesButtonsSize,
       rangesButtonsVariant = 'ghost',
+      required,
       separator = true,
       size,
       startDate,
@@ -316,6 +323,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
           readOnly={inputReadOnly || typeof format === 'string'}
+          required={required}
           onChange={(event) => {
             const date = getLocalDateFromString(event.target.value, locale, timepicker)
             if (date instanceof Date && date.getTime()) {
@@ -346,6 +354,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
             readOnly={inputReadOnly || typeof format === 'string'}
+            required={required}
             onChange={(event) => {
               const date = getLocalDateFromString(event.target.value, locale, timepicker)
               if (date instanceof Date && date.getTime()) {
@@ -565,6 +574,7 @@ CDateRangePicker.propTypes = {
   rangesButtonsColor: CButton.propTypes?.color,
   rangesButtonsSize: CButton.propTypes?.size,
   rangesButtonsVariant: CButton.propTypes?.variant,
+  required: PropTypes.bool,
   separator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   size: PropTypes.oneOf(['sm', 'lg']),
   timepicker: PropTypes.bool,

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  ReactNode,
   RefObject,
   useEffect,
   useRef,
@@ -87,6 +88,16 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: boolean
 }
 
+const PopperManagerWrapper = ({
+  children,
+  popper,
+}: {
+  children: ReactNode
+  popper: boolean
+}) => {
+  return popper ? <Manager>{children}</Manager> : <>{children}</>
+}
+
 interface ContextProps extends CDropdownProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dropdownToggleRef: RefObject<any> | undefined
@@ -149,38 +160,30 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const DropdownContent = () => {
-      return variant === 'input-group' ? (
-        <>{children}</>
-      ) : (
-        <Component
-          className={classNames(
-            variant === 'nav-item' ? 'nav-item dropdown' : variant,
-            {
-              'dropdown-center': direction === 'center',
-              'dropup dropup-center': direction === 'dropup-center',
-              direction: direction && direction !== 'center' && direction !== 'dropup-center',
-              show: _visible,
-            },
-            className,
-          )}
-          {...rest}
-          ref={forkedRef}
-        >
-          {children}
-        </Component>
-      )
-    }
-
     return (
       <CDropdownContext.Provider value={contextValues}>
-        {popper ? (
-          <Manager>
-            <DropdownContent />
-          </Manager>
-        ) : (
-          <DropdownContent />
-        )}
+        <PopperManagerWrapper popper={popper}>
+          {variant === 'input-group' ? (
+            <>{children}</>
+          ) : (
+            <Component
+              className={classNames(
+                variant === 'nav-item' ? 'nav-item dropdown' : variant,
+                {
+                  'dropdown-center': direction === 'center',
+                  'dropup dropup-center': direction === 'dropup-center',
+                  direction: direction && direction !== 'center' && direction !== 'dropup-center',
+                  show: _visible,
+                },
+                className,
+              )}
+              {...rest}
+              ref={forkedRef}
+            >
+              {children}
+            </Component>
+          )}
+        </PopperManagerWrapper>
       </CDropdownContext.Provider>
     )
   },

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

@@ -60,6 +60,12 @@ export interface CTimePickerProps
    * Specifies a short hint that is visible in the input.
    */
   placeholder?: string
+  /**
+   * When present, it specifies that time must be filled out before submitting the form.
+   *
+   * @since 4.10.0
+   */
+  required?: boolean
   /**
    * Show seconds.
    *
@@ -102,6 +108,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       onHide,
       onShow,
       placeholder = 'Select time',
+      required,
       seconds = true,
       size,
       text,
@@ -195,6 +202,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           }
           placeholder={placeholder}
           readOnly={inputReadOnly}
+          required={required}
           ref={inputRef}
         />
         {(indicator || cleaner) && (
@@ -397,6 +405,7 @@ CTimePicker.propTypes = {
   className: PropTypes.string,
   locale: PropTypes.string,
   onTimeChange: PropTypes.func,
+  required: PropTypes.bool,
   seconds: PropTypes.bool,
   time: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   variant: PropTypes.oneOf(['roll', 'select']),

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;