@coreui/react-pro 5.0.0-alpha.0 → 5.0.0-alpha.1

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/v5.0.0-alpha.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v5.0.0-alpha.1.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/CCalendar.d.ts

@@ -3,7 +3,7 @@ export interface CCalendarProps {
     /**
      * Default date of the component
      */
-    calendarDate?: Date | string;
+    calendarDate?: Date | string | null;
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -80,6 +80,10 @@ export interface CCalendarProps {
      * @since 4.3.0
      */
     navYearFirst?: boolean;
+    /**
+     * Allow range selection.
+     */
+    range?: boolean;
     /**
      * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
      *
@@ -93,13 +97,21 @@ export interface CCalendarProps {
      */
     showAdjacementDays?: boolean;
     /**
-     * Allow range selection.
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
      */
-    range?: boolean;
+    showWeekNumber?: boolean;
     /**
      * Toggle select mode between start and end date.
      */
     selectEndDate?: boolean;
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType?: 'day' | 'week' | 'month' | 'year';
     /**
      * Initial selected date.
      */
@@ -110,22 +122,28 @@ export interface CCalendarProps {
      * @default 2
      */
     weekdayFormat?: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number);
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel?: string;
     /**
      * Callback fired when the calendar date changed.
      */
-    onCalendarDateChange?: (date: Date) => void;
+    onCalendarDateChange?: (date: Date | string) => void;
     /**
      * Callback fired when the user hovers over the calendar cell.
      */
-    onDayHover?: (date: Date | null) => void;
+    onDateHover?: (date: Date | string | null) => void;
     /**
      * Callback fired when the start date changed.
      */
-    onStartDateChange?: (date: Date | null, formatedDate?: string | undefined) => void;
+    onStartDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void;
     /**
      * Callback fired when the end date changed.
      */
-    onEndDateChange?: (date: Date | null, formatedDate?: string | undefined) => void;
+    onEndDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void;
     /**
      * Callback fired when the selection type changed.
      */

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

@@ -1,15 +1,24 @@
+export declare const convertIsoWeekToDate: (isoWeek: string) => Date;
+export declare const convertToDateObject: (date: Date | string | null, selectionType?: 'day' | 'week' | 'month' | 'year') => Date;
 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 getCalendarDate: (calendarDate: Date, order: number, view: 'days' | 'months' | 'years') => Date;
 export declare const getCurrentYear: () => number;
 export declare const getCurrentMonth: () => number;
+export declare const getDateBySelectionType: (date: Date | null, selectionType: 'day' | 'week' | 'month' | 'year') => string | Date | null;
 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 getDayNumber: (date: Date) => number;
+export declare const getWeekNumber: (date: Date) => number;
 export declare const getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
-    date: Date;
-    month: string;
-}[][];
+    weekNumber?: number | undefined;
+    days: {
+        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;

package/dist/components/close-button/CCloseButton.d.ts

@@ -4,12 +4,18 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
      * A string of all className you want applied to the base component.
      */
     className?: string;
+    /**
+     * Invert the default color.
+     */
+    dark?: boolean;
     /**
      * Toggle the disabled state for the component.
      */
     disabled?: boolean;
     /**
      * Change the default color to white.
+     *
+     * @deprecated 5.0.0
      */
     white?: boolean;
 }

package/dist/components/modal/CModal.d.ts

@@ -16,6 +16,12 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
      * @ignore
      */
     duration?: number;
+    /**
+     * Puts the focus on the modal when shown.
+     *
+     * @since v4.10.0
+     */
+    focus?: boolean;
     /**
      * Set modal to covers the entire user viewport.
      */

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

@@ -2,7 +2,7 @@ export type Option = {
     custom?: boolean;
     disabled?: boolean;
     selected?: boolean;
-    text: string;
+    label: string;
     value: number | string;
     [key: string]: number | string | any;
 };
@@ -13,7 +13,7 @@ export type OptionsGroup = {
 };
 export type SelectedOption = {
     disabled?: boolean;
-    text: string;
+    label: string;
     value: number | string;
     [key: string]: number | string | any;
 };

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

@@ -1,7 +1,7 @@
 import type { Option, OptionsGroup, SelectedOption } from './types';
-export declare const createOption: (text: string, options: (Option | OptionsGroup)[]) => {
+export declare const createOption: (label: string, options: (Option | OptionsGroup)[]) => {
     value: string;
-    text: string;
+    label: string;
     custom: boolean;
 }[];
 export declare const filterOptionsList: (search: string, _options: (Option | OptionsGroup)[]) => any[];

package/dist/components/nav/CNav.d.ts

@@ -15,6 +15,6 @@ export interface CNavProps extends HTMLAttributes<HTMLDivElement | HTMLUListElem
     /**
      * Set the nav variant to tabs or pills.
      */
-    variant?: 'tabs' | 'pills' | 'underline';
+    variant?: 'pills' | 'tabs' | 'underline';
 }
 export declare const CNav: React.ForwardRefExoticComponent<CNavProps & React.RefAttributes<HTMLDivElement | HTMLOListElement | HTMLUListElement>>;

package/dist/components/navbar/CNavbar.d.ts

@@ -12,7 +12,7 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
      */
     color?: Colors;
     /**
-     * Sets if the color of text should be colored for a light or dark dark background.
+     * Sets if the color of text should be colored for a light or dark background.
      */
     colorScheme?: 'dark' | 'light';
     /**

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

@@ -8,6 +8,10 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
      * A string of all className you want applied to the base component.
      */
     className?: string;
+    /**
+     * Sets a darker color scheme.
+     */
+    dark?: boolean;
     /**
      * Closes the offcanvas when escape key is pressed.
      */

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

@@ -1,9 +1,10 @@
 import React, { MouseEvent, ReactNode } from 'react';
 import { CTableBodyProps } from '../table/CTableBody';
-import type { Item, ScopedColumns } from './types';
+import type { Column, Item, ScopedColumns } from './types';
 export interface CSmartTableBodyProps extends CTableBodyProps {
     clickableRows?: boolean;
     columnNames: string[];
+    columns: (Column | string)[];
     currentItems: Item[];
     firstItemOnActivePageIndex: number;
     noItemsLabel?: string | ReactNode;

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

@@ -100,9 +100,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
     itemsPerPageOptions?: number[];
     /**
      * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
-     * - label (String) - replaces default label text
-     * - values (Array) - custom array of pagination values
-     * - external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externaly by 'pagination-change' event).
+     * - external (Boolean) - disables automatic 'itemsPerPage' change.
      */
     itemsPerPageSelect?: boolean | ItemsPerPageSelect;
     /**

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

@@ -11,6 +11,8 @@ export type Column = {
     sorter?: boolean;
     _style?: any;
     _props?: CTableHeaderCellProps;
+    _colStyle?: any;
+    _colProps?: CTableDataCellProps;
 };
 export type ColumnFilter = {
     lazy?: boolean;
@@ -41,8 +43,6 @@ export type Item = {
 };
 export type ItemsPerPageSelect = {
     external?: boolean;
-    label?: string;
-    values?: Array<number>;
 };
 export type Pagination = {
     external?: boolean;

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

@@ -4,6 +4,7 @@ export declare const filterTable: (items: Item[], tableFilter: boolean | TableFi
 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 getColumnName: (column: string | Column) => string;
 export declare const getColumnNames: (columns: (string | Column)[] | undefined, items: Item[]) => string[];
 export declare const getColumns: (_columns: (Column | Group | string)[]) => (Column | string)[];
 export declare const countColumns: (columns: Column[], counter?: number) => number;
@@ -19,7 +20,8 @@ export declare const getColumnGroups: (columns: (string | Column)[] | undefined)
 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 getTableDataCellProps: (column: Column | string, item: Item, colName: string) => {};
+export declare const getTableDataCellStyles: (column: Column | string, item: Item, colName: string) => {};
 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;