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

package/README.md

@@ -42,7 +42,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.8.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.9.0-next.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,2 @@
+import { CCalendar } from './CCalendar';
+export { CCalendar };

package/dist/components/calendar/utils.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: <T>(arr: T[], numberOfGroups: number) => T[][];
+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/components/date-picker/CDatePicker.d.ts

@@ -9,7 +9,7 @@ export interface CDatePickerProps extends Omit<CDateRangePickerProps, 'calendars
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      *
      * The name attribute for the input element is generated based on the `id` property:
-     * - {id}-date
+     * - \{id\}-date
      */
     id?: string;
     /**

package/dist/components/date-range-picker/CDateRangePicker.d.ts

@@ -31,8 +31,8 @@ export interface CDateRangePickerProps extends Omit<CFormControlWrapperProps, 'f
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      *
      * The name attributes for input elements are generated based on the `id` property:
-     * - {id}-start-date
-     * - {id}-end-date
+     * - \{id\}-start-date
+     * - \{id\}-end-date
      */
     id?: string;
     /**

package/dist/components/element-cover/CElementCover.d.ts

@@ -8,8 +8,6 @@ interface CElementCoverProps extends HTMLAttributes<HTMLDivElement> {
      * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
      * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
      * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function.
-     *
-     * @type {sides: string[], query: string}[]
      */
     boundaries?: {
         sides: string[];
@@ -17,8 +15,6 @@ interface CElementCoverProps extends HTMLAttributes<HTMLDivElement> {
     }[];
     /**
      * Opacity of the cover.
-     *
-     * @type number
      */
     opacity?: number;
 }

package/dist/components/element-cover/index.d.ts

@@ -0,0 +1,2 @@
+import { CElementCover } from './CElementCover';
+export { CElementCover };

package/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './collapse';
 export * from './date-picker';
 export * from './date-range-picker';
 export * from './dropdown';
+export * from './element-cover';
 export * from './footer';
 export * from './form';
 export * from './grid';

package/dist/components/offcanvas/COffcanvas.d.ts

@@ -3,7 +3,7 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Apply a backdrop on body while offcanvas is open.
      */
-    backdrop?: boolean;
+    backdrop?: boolean | 'static';
     /**
      * A string of all className you want applied to the base component.
      */
@@ -28,6 +28,12 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
      * Generates modal using createPortal.
      */
     portal?: boolean;
+    /**
+     * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+     *
+     * @since 4.6.0
+     */
+    responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     /**
      * Allow body scrolling while offcanvas is open
      */

package/dist/components/smart-table/CSmartTableBody.d.ts

@@ -1,15 +1,16 @@
 import React, { MouseEvent, ReactNode } from 'react';
 import { CTableBodyProps } from '../table/CTableBody';
-import { ItemInternal, ScopedColumns } from './CSmartTableInterface';
+import type { Item, ScopedColumns } from './types';
 export interface CSmartTableBodyProps extends CTableBodyProps {
     clickableRows?: boolean;
-    currentItems: ItemInternal[];
+    columnNames: string[];
+    currentItems: Item[];
     firstItemOnActivePageIndex: number;
     noItemsLabel?: string | ReactNode;
-    onRowChecked?: (id: number, value: boolean) => void;
-    onRowClick?: (item: ItemInternal, index: number, columnName: string, event: MouseEvent | boolean) => void;
-    rawColumnNames: string[];
+    onRowChecked?: (item: Item, value: boolean) => void;
+    onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void;
     scopedColumns?: ScopedColumns;
     selectable?: boolean;
+    selected?: Item[];
 }
 export declare const CSmartTableBody: React.ForwardRefExoticComponent<CSmartTableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/components/smart-table/CSmartTableHead.d.ts

@@ -1,5 +1,5 @@
 import React, { ElementType, ReactNode } from 'react';
-import { ColumnFilter, ColumnFilterValue, Column, ItemInternal, Sorter, SorterValue } from './CSmartTableInterface';
+import type { ColumnFilter, ColumnFilterValue, Column, Item, Sorter, SorterValue } from './types';
 import { CTableHeadProps } from '../table/CTableHead';
 export interface CSmartTableHeadProps extends CTableHeadProps {
     columnFilter?: boolean | ColumnFilter;
@@ -12,9 +12,12 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
     handleFilterOnInput?: (key: string, value: string) => void;
     handleSelectAllChecked?: () => void;
     handleSort?: (key: string, index: number) => void;
-    items: ItemInternal[];
+    items: Item[];
     selectable?: boolean;
-    selectAll?: boolean | string;
+    selectAll?: boolean | {
+        external?: boolean;
+    };
+    selectedAll?: boolean | string;
     sorterState?: SorterValue;
     sortingIcon?: ReactNode;
     sortingIconAscending?: ReactNode;

package/dist/components/smart-table/CSmartTableInterface.d.ts

@@ -1,68 +1,10 @@
 import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
 import { CSmartPaginationProps } from '../smart-pagination/CSmartPagination';
 import { CTableProps } from '../table/CTable';
-import { CTableDataCellProps } from '../table/CTableDataCell';
 import { CTableBodyProps } from '../table/CTableBody';
 import { CTableFootProps } from '../table/CTableFoot';
-import { CTableHeaderCellProps } from '../table/CTableHeaderCell';
-import { CTableRowProps } from '../table/CTableRow';
 import { CTableHeadProps } from '../table/CTableHead';
-export interface Column {
-    filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode);
-    label?: string;
-    key: string;
-    sorter?: boolean;
-    _style?: any;
-    _props?: CTableHeaderCellProps;
-}
-export interface ColumnFilter {
-    lazy?: boolean;
-    external?: boolean;
-}
-export interface ColumnFilterValue {
-    [key: string]: any;
-}
-export interface FooterItem {
-    label?: string;
-    _props?: CTableDataCellProps;
-}
-export interface Item {
-    [key: string]: number | string | any;
-    _cellProps?: any;
-    _props?: CTableRowProps;
-    _selected?: boolean;
-}
-export interface ItemInternal extends Item {
-    _id: number;
-}
-export interface ItemsPerPageSelect {
-    external?: boolean;
-    label?: string;
-    values?: Array<number>;
-}
-export interface Pagination {
-    external?: boolean;
-}
-export interface Sorter {
-    resetable?: boolean;
-    external?: boolean;
-}
-export interface ScopedColumns {
-    [key: string]: any;
-    details?: (a: Item, b: number) => ReactNode;
-}
-export interface SorterValue {
-    column?: string;
-    state?: number | string;
-}
-export interface TableFilter {
-    lazy?: boolean;
-    external?: boolean;
-}
-export interface NoItemsView {
-    noResults?: string;
-    noItems?: string;
-}
+import type { Column, ColumnFilter, ColumnFilterValue, FooterItem, Item, ItemsPerPageSelect, Pagination, Sorter, ScopedColumns, SorterValue, TableFilter } from './types';
 export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Sets active page. If 'pagination' prop is enabled, activePage is set only initially.
@@ -111,6 +53,12 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
      */
     columnSorter?: boolean | Sorter;
+    /**
+     * ReactNode for passing custom CElementCover content.
+     *
+     * @since 4.9.0
+     */
+    elementCover?: ReactNode;
     /**
      * If `true` Displays table footer, which mirrors table header. (without column filter).
      * Or Array of objects or strings, where each element represents one cell in the table footer.
@@ -132,6 +80,10 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
      */
     items?: Item[];
+    /**
+     * The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.
+     */
+    itemsNumber?: number;
     /**
      * Number of items per site, when pagination is enabled.
      */
@@ -179,6 +131,10 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * Row click callback.
      */
     onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void;
+    /**
+     * Select all callback.
+     */
+    onSelectAll?: () => void;
     /**
      * Selected items change callback.
      */
@@ -207,6 +163,21 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * Add checkboxes to make table rows selectable.
      */
     selectable?: boolean;
+    /**
+     * Enables select all checkbox displayed in the header of the table.
+     *
+     * Can be customized, by passing prop as object with additional options as keys. Available options:
+     * - external (Boolean) - Disables automatic selection inside the component.
+     */
+    selectAll?: boolean | {
+        external?: boolean;
+    };
+    /**
+     * Array of selected objects, where each object represents one item - row in table.
+     *
+     * Example item: `{ name: 'John' , age: 12 }`
+     */
+    selected?: Item[];
     /**
      * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'.
      */

package/dist/components/smart-table/types.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { CTableDataCellProps } from '../table/CTableDataCell';
+import { CTableHeaderCellProps } from '../table/CTableHeaderCell';
+import { CTableRowProps } from '../table/CTableRow';
+export type Column = {
+    filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode);
+    label?: string;
+    key: string;
+    sorter?: boolean;
+    _style?: any;
+    _props?: CTableHeaderCellProps;
+};
+export type ColumnFilter = {
+    lazy?: boolean;
+    external?: boolean;
+};
+export type ColumnFilterValue = {
+    [key: string]: any;
+};
+export type FooterItem = {
+    label?: string;
+    _props?: CTableDataCellProps;
+};
+export type Item = {
+    [key: string]: number | string | any;
+    _cellProps?: any;
+    _props?: CTableRowProps;
+    _selected?: boolean;
+};
+export type ItemsPerPageSelect = {
+    external?: boolean;
+    label?: string;
+    values?: Array<number>;
+};
+export type Pagination = {
+    external?: boolean;
+};
+export type Sorter = {
+    resetable?: boolean;
+    external?: boolean;
+};
+export type ScopedColumns = {
+    [key: string]: any;
+    details?: (a: Item, b: number) => ReactNode;
+};
+export type SorterValue = {
+    column?: string;
+    state?: number | string;
+};
+export type TableFilter = {
+    lazy?: boolean;
+    external?: boolean;
+};

package/dist/components/smart-table/utils.d.ts

@@ -0,0 +1,16 @@
+import type { Column, ColumnFilter, ColumnFilterValue, Item, Sorter, SorterValue, TableFilter } from './types';
+export declare const filterColumns: (items: Item[], columnFilter: boolean | ColumnFilter | undefined, columnFilterState: ColumnFilterValue, itemsDataColumns: string[]) => Item[];
+export declare const filterTable: (items: Item[], tableFilter: boolean | TableFilter | undefined, tableFilterState: string, itemsDataColumns: string[]) => Item[];
+export declare const getClickedColumnName: (target: HTMLTextAreaElement, columnNames: string[]) => string;
+export declare const getColumnKey: (column: Column | string) => string;
+export declare const getColumnLabel: (column: Column | string) => string;
+export declare const getColumnNames: (columns: (string | Column)[] | undefined, items: Item[]) => string[];
+export declare const getColumnNamesFromItems: (items: Item[]) => string[];
+export declare const getColumnSorterState: (key: string, sorterState: SorterValue | undefined) => string | number;
+export declare const getColumnValues: (items: Item[], key: string) => any[];
+export declare const getTableDataCellProps: (item: Item, colName: string) => any;
+export declare const getTableHeaderCellProps: (column: Column | string) => import("../table/CTableHeaderCell").CTableHeaderCellProps;
+export declare const getTableHeaderCellStyles: (column: Column | string, columnSorter: boolean | Sorter | undefined) => any;
+export declare const isSortable: (i: number, columns: (string | Column)[] | undefined, columnSorter: Sorter | boolean | undefined, itemsDataColumns: string[], columnNames: string[]) => boolean | undefined;
+export declare const pretifyName: (name: string) => string;
+export declare const sortItems: (columnSorter: boolean | Sorter | undefined, items: Item[], itemsDataColumns: string[], sorterState: SorterValue) => Item[];

package/dist/components/time-picker/types.d.ts

@@ -0,0 +1,15 @@
+export type LocalizedTimePartials = {
+    listOfHours: {
+        value: number;
+        label: string;
+    }[];
+    listOfMinutes: {
+        value: number;
+        label: string;
+    }[];
+    listOfSeconds: {
+        value: number;
+        label: string;
+    }[];
+    hour12: boolean;
+};

package/dist/components/time-picker/utils.d.ts

@@ -0,0 +1,23 @@
+import type { LocalizedTimePartials } from './types';
+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 getLocalizedTimePartials: (locale: string, ampm?: 'auto' | boolean) => LocalizedTimePartials;
+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;

package/dist/hooks/index.d.ts

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

package/dist/hooks/useForkedRef.d.ts

@@ -0,0 +1,7 @@
+/// <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/hooks/useStateWithCallback.d.ts

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