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

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

@@ -34,7 +34,7 @@ export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
+     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
      */
     textColor?: TextColors;
 }

package/dist/components/badge/CBadge.d.ts

@@ -32,7 +32,7 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
+     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
      */
     textColor?: TextColors;
 }

package/dist/components/card/CCard.d.ts

@@ -14,7 +14,7 @@ export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Sets the text color context of the component to one of CoreUI’s themed colors.
      *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
+     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
      */
     textColor?: string;
 }

package/dist/components/dropdown/CDropdown.d.ts

@@ -91,6 +91,7 @@ interface ContextProps extends CDropdownProps {
     setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
     portal: boolean;
 }
+export declare const getNextActiveElement: (list: HTMLElement[], activeElement: HTMLElement, shouldGetNext: boolean, isCycleAllowed: boolean) => HTMLElement;
 export declare const CDropdownContext: React.Context<ContextProps>;
 export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
 export {};

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

@@ -11,7 +11,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
     handleFilterOnChange?: (key: string, value: string) => void;
     handleFilterOnInput?: (key: string, value: string) => void;
     handleSelectAllChecked?: () => void;
-    handleSort?: (key: string, index: number) => void;
+    handleSort?: (key: string, index: number, order?: 'asc' | 'desc') => void;
     items: Item[];
     selectable?: boolean;
     selectAll?: boolean | {

package/dist/index.es.js

@@ -4832,7 +4832,7 @@ CBreadcrumbItem.displayName = 'CBreadcrumbItem';
 var CButton = forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.component, component = _d === void 0 ? 'button' : _d, shape = _a.shape, size = _a.size, _e = _a.type, type = _e === void 0 ? 'button' : _e, variant = _a.variant, rest = __rest$1(_a, ["children", "className", "color", "component", "shape", "size", "type", "variant"]);
-    return (React$1.createElement(CLink, __assign$1({ component: rest.href ? 'a' : component, type: type, className: classNames$1('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className) }, rest, { ref: ref }), children));
+    return (React$1.createElement(CLink, __assign$1({ component: rest.href ? 'a' : component }, (!rest.href && { type: type }), { className: classNames$1('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className) }, rest, { ref: ref }), children));
 });
 CButton.propTypes = {
     children: PropTypes$1.node,
@@ -9883,6 +9883,18 @@ var CDatePicker = forwardRef(function (_a, ref) {
 CDatePicker.displayName = 'CDatePicker';
 CDatePicker.propTypes = __assign$1(__assign$1({}, CDateRangePicker.propTypes), { date: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]), onDateChange: PropTypes$1.func });
 
+var getNextActiveElement = function (list, activeElement, shouldGetNext, isCycleAllowed) {
+    var listLength = list.length;
+    var index = list.indexOf(activeElement);
+    if (index === -1) {
+        return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0];
+    }
+    index += shouldGetNext ? 1 : -1;
+    if (isCycleAllowed) {
+        index = (index + listLength) % listLength;
+    }
+    return list[Math.max(0, Math.min(index, listLength - 1))];
+};
 var getPlacement = function (placement, direction, alignment, isRTL) {
     var _placement = placement;
     if (direction === 'dropup') {
@@ -9945,18 +9957,33 @@ var CDropdown = forwardRef(function (_a, ref) {
     }, [visible]);
     useEffect(function () {
         if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
+            dropdownToggleRef.current.focus();
             popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig);
             window.addEventListener('mouseup', handleMouseUp);
             window.addEventListener('keyup', handleKeyup);
+            dropdownToggleRef.current.addEventListener('keydown', handleKeydown);
+            dropdownMenuRef.current.addEventListener('keydown', handleKeydown);
             onShow && onShow();
         }
         return function () {
             popper && destroyPopper();
             window.removeEventListener('mouseup', handleMouseUp);
             window.removeEventListener('keyup', handleKeyup);
+            dropdownToggleRef.current &&
+                dropdownToggleRef.current.removeEventListener('keydown', handleKeydown);
+            dropdownMenuRef.current &&
+                dropdownMenuRef.current.removeEventListener('keydown', handleKeydown);
             onHide && onHide();
         };
     }, [_visible]);
+    var handleKeydown = function (event) {
+        if (_visible && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            var target = event.target;
+            event.preventDefault();
+            var items = [].concat.apply([], Element.prototype.querySelectorAll.call(dropdownMenuRef.current, '.dropdown-item:not(.disabled):not(:disabled)'));
+            getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus();
+        }
+    };
     var handleKeyup = function (event) {
         if (autoClose === false) {
             return;
@@ -9984,7 +10011,6 @@ var CDropdown = forwardRef(function (_a, ref) {
                 'dropup dropup-center': direction === 'dropup-center'
             },
             _b["".concat(direction)] = direction && direction !== 'center' && direction !== 'dropup-center',
-            _b.show = _visible,
             _b), className) }, rest, { ref: forkedRef }), children))));
 });
 var alignmentDirection = PropTypes$1.oneOf(['start', 'end']);
@@ -10097,7 +10123,7 @@ CDropdownMenu.displayName = 'CDropdownMenu';
 
 var CDropdownToggle = function (_a) {
     var children = _a.children, _b = _a.caret, caret = _b === void 0 ? true : _b, custom = _a.custom, className = _a.className, split = _a.split, _c = _a.trigger, trigger = _c === void 0 ? 'click' : _c, rest = __rest$1(_a, ["children", "caret", "custom", "className", "split", "trigger"]);
-    var _d = useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
+    var _d = useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, visible = _d.visible, setVisible = _d.setVisible;
     var triggers = __assign$1(__assign$1({}, ((trigger === 'click' || trigger.includes('click')) && {
         onClick: function (event) {
             event.preventDefault();
@@ -10110,17 +10136,13 @@ var CDropdownToggle = function (_a) {
     var togglerProps = __assign$1({ className: classNames$1({
             'dropdown-toggle': caret,
             'dropdown-toggle-split': split,
-            'nav-link': variant === 'nav-item',
+            show: visible,
         }, className), 'aria-expanded': visible }, (!rest.disabled && __assign$1({}, triggers)));
-    // We use any because Toggler can be `a` as well as `button`.
     var Toggler = function () {
         if (custom && React$1.isValidElement(children)) {
             return (React$1.createElement(React$1.Fragment, null, React$1.cloneElement(children, __assign$1(__assign$1({ 'aria-expanded': visible }, (!rest.disabled && __assign$1({}, triggers))), { ref: dropdownToggleRef }))));
         }
-        if (variant === 'nav-item') {
-            return (React$1.createElement("a", __assign$1({ href: "#" }, togglerProps, { ref: dropdownToggleRef }), children));
-        }
-        return (React$1.createElement(CButton, __assign$1({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: dropdownToggleRef }),
+        return (React$1.createElement(CButton, __assign$1({}, togglerProps, { tabIndex: 0 }, rest, { ref: dropdownToggleRef }),
             children,
             split && React$1.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
     };
@@ -13947,23 +13969,41 @@ var CSmartTableHead = forwardRef(function (_a, ref) {
         React$1.createElement(CTableRow, null,
             selectable && (React$1.createElement(CTableHeaderCell, null, selectAll && (React$1.createElement(CFormCheck, { checked: typeof selectedAll === 'boolean' ? selectedAll : false, indeterminate: selectedAll === 'indeterminate' ? true : false, onChange: function () { return handleSelectAllChecked && handleSelectAllChecked(); }, ref: selectAllcheckboxRef })))),
             _columns.map(function (column, index) {
-                return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { onClick: function () { return handleSort && handleSort(getColumnKey(column), index); }, style: getTableHeaderCellStyles(column, columnSorter), key: index }),
+                var isSortable = columnSorter &&
+                    (typeof column === 'object'
+                        ? column.sorter === undefined
+                            ? true
+                            : column.sorter
+                        : true);
+                return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { 
+                    // onClick={() => handleSort && handleSort(getColumnKey(column), index)}
+                    style: getTableHeaderCellStyles(column, columnSorter), key: index }, (isSortable && {
+                    onClick: function () { return handleSort && handleSort(getColumnKey(column), index); },
+                    onKeyDown: function (event) {
+                        if (event.key === 'Enter') {
+                            handleSort && handleSort(getColumnKey(column), index);
+                        }
+                        if (event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            handleSort && handleSort(getColumnKey(column), index, 'asc');
+                        }
+                        if (event.key === 'ArrowDown') {
+                            event.preventDefault();
+                            handleSort && handleSort(getColumnKey(column), index, 'desc');
+                        }
+                    },
+                    tabIndex: 0,
+                })),
                     React$1.createElement("div", { className: "d-inline" }, getColumnLabel(column)),
-                    columnSorter &&
-                        (typeof column === 'object'
-                            ? (column.sorter === undefined
-                                ? true
-                                : column.sorter)
-                            : true) &&
-                        columnSorterIcon(column)));
+                    isSortable && columnSorterIcon(column)));
             })),
         columnFilter && (React$1.createElement(CTableRow, null,
             selectable && React$1.createElement(CTableHeaderCell, null),
             _columns.map(function (column, index) {
                 return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { key: index }), (typeof column === 'object'
-                    ? (column.filter === undefined
+                    ? column.filter === undefined
                         ? true
-                        : column.filter)
+                        : column.filter
                     : true) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
                     column.filter(getColumnValues(items, getColumnKey(column)), function (value) {
                         return handleOnCustomFilterChange &&
@@ -14152,14 +14192,20 @@ var CSmartTable = forwardRef(function (_a, ref) {
             return item;
         }));
     };
-    var handleSorterChange = function (column, index) {
+    var handleSorterChange = function (column, index, order) {
         if (!isSortable(index, columns, columnSorter, itemsDataColumns, columnNames)) {
             return;
         }
         //if column changed or sort was descending change asc to true
         var state = sorterState !== null && sorterState !== void 0 ? sorterState : { column: '', state: '' };
+        if (order) {
+            state.state = order;
+        }
         if (state.column === column) {
-            if (state.state === 0) {
+            if (order) {
+                state.state = order;
+            }
+            else if (state.state === 0) {
                 state.state = 'asc';
             }
             else if (state.state === 'asc') {
@@ -14171,11 +14217,12 @@ var CSmartTable = forwardRef(function (_a, ref) {
         }
         else {
             state.column = column;
-            state.state = 'asc';
+            state.state = order || 'asc';
         }
         setSorterState(__assign$1({}, state));
     };
     var handleTableFilterChange = function (value, type) {
+        to;
         var isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true;
         if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
             return;
@@ -14210,7 +14257,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
             React$1.createElement(CTable, __assign$1({}, tableProps),
                 header && (React$1.createElement(CSmartTableHead, __assign$1({}, tableHeadProps, { columnFilter: columnFilter, columnFilterState: columnFilterState, columns: columns !== null && columns !== void 0 ? columns : columnNames, columnSorter: columnSorter, items: _items, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, sorterState: sorterState, sortingIcon: sortingIcon, sortingIconAscending: sortingIconAscending, sortingIconDescending: sortingIconDescending, handleFilterOnChange: function (key, event) {
                         return handleColumnFilterChange(key, event, 'change');
-                    }, handleFilterOnInput: function (key, event) { return handleColumnFilterChange(key, event, 'input'); }, handleOnCustomFilterChange: function (key, event) { return handleColumnFilterChange(key, event); }, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, handleSort: function (key, index) { return handleSorterChange(key, index); } }))),
+                    }, handleFilterOnInput: function (key, event) { return handleColumnFilterChange(key, event, 'input'); }, handleOnCustomFilterChange: function (key, event) { return handleColumnFilterChange(key, event); }, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, handleSort: function (key, index, order) { return handleSorterChange(key, index, order); } }))),
                 React$1.createElement(CSmartTableBody, __assign$1({ clickableRows: clickableRows, columnNames: columnNames, columns: columns !== null && columns !== void 0 ? columns : columnNames, currentItems: currentItems, firstItemOnActivePageIndex: firstItemOnActivePageIndex, noItemsLabel: noItemsLabel, onRowClick: function (item, index, columnName, event) {
                         return clickableRows && onRowClick && onRowClick(item, index, columnName, event);
                     }, onRowChecked: function (item, value) { return handleRowChecked(item, value); }, scopedColumns: scopedColumns, selectable: selectable, selected: _selected }, tableBodyProps)),
@@ -14692,7 +14739,7 @@ CTooltip.displayName = 'CTooltip';
 var CWidgetStatsA = forwardRef(function (_a, ref) {
     var _b;
     var action = _a.action, chart = _a.chart, className = _a.className, color = _a.color, title = _a.title, value = _a.value, rest = __rest$1(_a, ["action", "chart", "className", "color", "title", "value"]);
-    return (React$1.createElement(CCard, __assign$1({ className: classNames$1((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className) }, rest, { ref: ref }),
+    return (React$1.createElement(CCard, __assign$1({ className: classNames$1((_b = {}, _b["bg-".concat(color)] = color, _b['text-white'] = color, _b), className) }, rest, { ref: ref }),
         React$1.createElement(CCardBody, { className: "pb-0 d-flex justify-content-between align-items-start" },
             React$1.createElement("div", null,
                 value && React$1.createElement("div", { className: "fs-4 fw-semibold" }, value),
@@ -14712,12 +14759,12 @@ CWidgetStatsA.displayName = 'CWidgetStatsA';
 
 var CWidgetStatsB = forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, inverse = _a.inverse, progress = _a.progress, text = _a.text, title = _a.title, value = _a.value, rest = __rest$1(_a, ["className", "color", "inverse", "progress", "text", "title", "value"]);
-    return (React$1.createElement(CCard, __assign$1({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
+    return (React$1.createElement(CCard, __assign$1({ className: className, color: color }, (inverse && { textColor: 'white' }), rest, { ref: ref }),
         React$1.createElement(CCardBody, null,
             value && React$1.createElement("div", { className: "fs-4 fw-semibold" }, value),
             title && React$1.createElement("div", null, title),
             React$1.createElement(CProgress, __assign$1({ className: "my-2", height: 4 }, (inverse && { white: true }), progress)),
-            text && (React$1.createElement("small", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, text)))));
+            text && (React$1.createElement("small", { className: inverse ? 'text-white text-opacity-75' : 'text-body-secondary' }, text)))));
 });
 CWidgetStatsB.propTypes = {
     className: PropTypes$1.string,
@@ -14732,11 +14779,11 @@ CWidgetStatsB.displayName = 'CWidgetCWidgetStatsB';
 
 var CWidgetStatsC = forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, icon = _a.icon, inverse = _a.inverse, progress = _a.progress, title = _a.title, value = _a.value, rest = __rest$1(_a, ["className", "color", "icon", "inverse", "progress", "title", "value"]);
-    return (React$1.createElement(CCard, __assign$1({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
+    return (React$1.createElement(CCard, __assign$1({ className: className, color: color }, (inverse && { textColor: 'white' }), rest, { ref: ref }),
         React$1.createElement(CCardBody, null,
-            icon && (React$1.createElement("div", { className: "text-medium-emphasis".concat(inverse ? '-inverse' : '', " text-end mb-4") }, icon)),
-            value && (React$1.createElement("div", { className: "text-high-emphasis".concat(inverse ? '-inverse' : '', " fs-4 fw-semibold") }, value)),
-            title && (React$1.createElement("div", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, title)),
+            icon && React$1.createElement("div", { className: "text-end mb-4" }, icon),
+            value && React$1.createElement("div", { className: "fs-4 fw-semibold" }, value),
+            title && (React$1.createElement("div", { className: inverse ? 'text-white text-opacity-75' : 'text-body-secondary' }, title)),
             React$1.createElement(CProgress, __assign$1({ className: "mt-3 mb-0", height: 4 }, (inverse && { white: true }), progress)))));
 });
 CWidgetStatsC.propTypes = {
@@ -14765,7 +14812,7 @@ var CWidgetStatsD = forwardRef(function (_a, ref) {
                     index % 2 !== 0 && React$1.createElement("div", { className: "vr" }),
                     React$1.createElement(CCol, null,
                         React$1.createElement("div", { className: "fs-5 fw-semibold" }, value.value),
-                        React$1.createElement("div", { className: "text-uppercase text-medium-emphasis small" }, value.title))));
+                        React$1.createElement("div", { className: "text-uppercase text-body-secondary small" }, value.title))));
             }))));
 });
 CWidgetStatsD.propTypes = {
@@ -14781,7 +14828,7 @@ var CWidgetStatsE = forwardRef(function (_a, ref) {
     var chart = _a.chart, className = _a.className, title = _a.title, value = _a.value, rest = __rest$1(_a, ["chart", "className", "title", "value"]);
     return (React$1.createElement(CCard, __assign$1({ className: classNames$1(className) }, rest, { ref: ref }),
         React$1.createElement(CCardBody, { className: "text-center" },
-            title && (React$1.createElement("div", { className: "text-medium-emphasis small text-uppercase fw-semibold" }, title)),
+            title && (React$1.createElement("div", { className: "text-body-secondary small text-uppercase fw-semibold" }, title)),
             value && React$1.createElement("div", { className: "fs-6 fw-semibold py-3" }, value),
             chart)));
 });
@@ -14801,7 +14848,7 @@ var CWidgetStatsF = forwardRef(function (_a, ref) {
             React$1.createElement("div", { className: "me-3 text-white bg-".concat(color, " ").concat(padding ? 'p-3' : 'p-4') }, icon),
             React$1.createElement("div", null,
                 React$1.createElement("div", { className: "fs-6 fw-semibold text-".concat(color) }, value),
-                React$1.createElement("div", { className: "text-medium-emphasis text-uppercase fw-semibold small" }, title))),
+                React$1.createElement("div", { className: "text-body-secondary text-uppercase fw-semibold small" }, title))),
         footer && React$1.createElement(CCardFooter, null, footer)));
 });
 CWidgetStatsF.propTypes = {