@coreui/react-pro 4.9.0 → 4.11.0-next.0

package/src/components/multi-select/CMultiSelectOptions.tsx

@@ -6,9 +6,11 @@ import { CVirtualScroller } from './../virtual-scroller'
 
 import { getNextSibling, getPreviousSibling } from './utils'
 import type { Option } from './types'
+import { CElementCover } from '../element-cover'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
   handleOptionOnClick?: (option: Option) => void
+  loading?: boolean
   options: Option[]
   optionsMaxHeight?: number | string
   optionsStyle?: 'checkbox' | 'text'
@@ -22,6 +24,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
   (
     {
       handleOptionOnClick,
+      loading,
       options,
       optionsMaxHeight,
       optionsStyle,
@@ -44,7 +47,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
         const target = event.target as HTMLElement
         const next = getNextSibling(target, '.form-multi-select-option')
         if (next) {
-          (next as HTMLElement).focus() // eslint-disable-line prettier/prettier
+          ;(next as HTMLElement).focus() // eslint-disable-line prettier/prettier
         }
       }
 
@@ -53,7 +56,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
         const target = event.target as HTMLElement
         const prev = getPreviousSibling(target, '.form-multi-select-option')
         if (prev) {
-          (prev as HTMLElement).focus() // eslint-disable-line prettier/prettier
+          ;(prev as HTMLElement).focus() // eslint-disable-line prettier/prettier
         }
       }
     }
@@ -86,26 +89,36 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
         <div className="form-multi-select-options-empty">{searchNoResultsLabel}</div>
       )
 
-    return virtualScroller ? (
-      <CVirtualScroller className="form-multi-select-options" visibleItems={visibleItems} ref={ref}>
-        {createOptions(options)}
-      </CVirtualScroller>
-    ) : (
-      <div
-        className="form-multi-select-options"
-        {...(optionsMaxHeight !== 'auto' && {
-          style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
-        })}
-        ref={ref}
-      >
-        {createOptions(options)}
-      </div>
+    return (
+      <>
+        {virtualScroller ? (
+          <CVirtualScroller
+            className="form-multi-select-options"
+            visibleItems={visibleItems}
+            ref={ref}
+          >
+            {createOptions(options)}
+          </CVirtualScroller>
+        ) : (
+          <div
+            className="form-multi-select-options"
+            {...(optionsMaxHeight !== 'auto' && {
+              style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
+            })}
+            ref={ref}
+          >
+            {createOptions(options)}
+          </div>
+        )}
+        {loading && <CElementCover />}
+      </>
     )
   },
 )
 
 CMultiSelectOptions.propTypes = {
   handleOptionOnClick: PropTypes.func,
+  loading: PropTypes.bool,
   options: PropTypes.array.isRequired,
   optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   optionsStyle: PropTypes.oneOf(['checkbox', 'text']),

package/src/components/multi-select/types.ts

@@ -1,4 +1,5 @@
 export type Option = {
+  custom?: boolean
   disabled?: boolean
   label?: string
   options?: Option[]

package/src/components/multi-select/utils.ts

@@ -1,33 +1,50 @@
 import type { Option, SelectedOption } from './types'
 
-export const filterOptionsList = (search: string, _options: Option[]) => {
-  return search.length > 0
+export const createOption = (text: string, options: Option[]) => {
+  const value = text.toLowerCase().replace(/\s/g, '-')
+  let uniqueValue = value
+  let i = 1
+
+  while (options.find((option) => String(option.value) === uniqueValue)) {
+    uniqueValue = `${value}-${i}`
+    i++
+  }
+
+  return [
+    {
+      value: uniqueValue,
+      text,
+      custom: true,
+    },
+  ]
+}
+
+export const filterOptionsList = (search: string, _options: Option[]) =>
+  search.length > 0
     ? _options &&
-        _options.reduce((acc: Option[], val: Option) => {
-          const options =
-            val.options &&
-            val.options.filter(
-              (element) =>
-                element.text && element.text.toLowerCase().includes(search.toLowerCase()),
-            )
-
-          if (
-            (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
-            (options && options.length > 0)
-          ) {
-            acc.push(Object.assign({}, val, options && options.length > 0 && { options }))
-          }
-
-          return acc
-        }, [])
+      _options.reduce((acc: Option[], val: Option) => {
+        const options =
+          val.options &&
+          val.options.filter(
+            (element) => element.text && element.text.toLowerCase().includes(search.toLowerCase()),
+          )
+        if (
+          (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
+          (options && options.length > 0)
+        ) {
+          acc.push(Object.assign({}, val, options && options.length > 0 && { options }))
+        }
+
+        return acc
+      }, [])
     : _options
-}
 
-export const flattenArray = (options: Option[]): Option[] => {
-  return options.reduce((acc: Option[], val: Option) => {
-    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
-  }, [])
-}
+export const flattenArray = (options: Option[]): Option[] =>
+  options.reduce(
+    (acc: Option[], val: Option) =>
+      acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val),
+    [],
+  )
 
 export const getNextSibling = (elem: HTMLElement, selector?: string) => {
   // Get the next sibling element

package/src/components/smart-table/CSmartTableInterface.tsx

@@ -121,7 +121,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    */
   itemsPerPageSelect?: boolean | ItemsPerPageSelect
   /**
-   * When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.
+   * When set, table will have loading style: loading spinner and reduced opacity.
    */
   loading?: boolean
   /**

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/src/components/virtual-scroller/CVirtualScroller.tsx

@@ -43,17 +43,17 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
     })
 
     useEffect(() => {
-      setItemsNumber(itemsNumber || React.Children.count(children))
-    }, [children, itemsNumber])
+      setItemsNumber(React.Children.count(children))
+    }, [children])
 
     useEffect(() => {
-      setViewportHeight(visibleItems * itemHeight + 2 * viewportPadding)
-    }, [viewportPadding, visibleItems, itemHeight])
+      setViewportHeight(Math.min(visibleItems, itemsNumber) * itemHeight + 2 * viewportPadding)
+    }, [itemHeight, itemsNumber, viewportPadding, visibleItems])
 
     useEffect(() => {
-      setMaxHeight(itemsNumber * itemHeight + 2 * viewportPadding)
+      setMaxHeight(itemsNumber * itemHeight)
       virtualScrollRef.current && virtualScrollRef.current.scrollTop
-    }, [itemsNumber, itemHeight])
+    }, [itemHeight, itemsNumber])
 
     useEffect(() => {
       setBuffer(Math.floor(visibleItems / 2))
@@ -73,7 +73,8 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
         }
         ref={forkedRef}
         style={{
-          height: maxHeight > viewportHeight ? viewportHeight : maxHeight,
+          // height: maxHeight > viewportHeight ? viewportHeight : maxHeight,
+          height: viewportHeight,
           overflowY: 'auto',
         }}
       >

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;