@coreui/react 4.4.0 → 4.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/Types.d.ts +6 -6
- package/dist/components/button/CButton.d.ts +4 -3
- package/dist/components/carousel/CCarousel.d.ts +6 -0
- package/dist/components/dropdown/CDropdown.d.ts +3 -3
- package/dist/components/dropdown/CDropdownItem.d.ts +1 -1
- package/dist/components/form/CFormCheck.d.ts +1 -1
- package/dist/components/form/CFormControlWrapper.d.ts +6 -0
- package/dist/components/form/CFormLabel.d.ts +2 -2
- package/dist/components/form/CFormRange.d.ts +1 -1
- package/dist/components/form/CFormSelect.d.ts +1 -1
- package/dist/components/form/CInputGroupText.d.ts +2 -2
- package/dist/components/form/index.d.ts +3 -1
- package/dist/components/grid/CCol.d.ts +3 -3
- package/dist/components/grid/CRow.d.ts +1 -1
- package/dist/components/header/CHeaderBrand.d.ts +2 -2
- package/dist/components/link/CLink.d.ts +2 -2
- package/dist/components/list-group/CListGroupItem.d.ts +3 -3
- package/dist/components/nav/CNavLink.d.ts +1 -1
- package/dist/components/toast/CToastClose.d.ts +4 -1
- package/dist/components/widgets/CWidgetStatsD.d.ts +1 -1
- package/dist/index.es.js +652 -628
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +944 -925
- package/dist/index.js.map +1 -1
- package/dist/utils/hooks/useForkedRef.d.ts +1 -1
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/isVisible.d.ts +2 -0
- package/package.json +9 -10
- package/src/components/button/CButton.tsx +3 -3
- package/src/components/carousel/CCarousel.tsx +38 -10
- package/src/components/form/CFormControlWrapper.tsx +20 -1
- package/src/components/form/CFormInput.tsx +2 -0
- package/src/components/form/CFormLabel.tsx +2 -2
- package/src/components/form/CFormRange.tsx +1 -1
- package/src/components/form/CFormSelect.tsx +2 -0
- package/src/components/form/CFormTextarea.tsx +2 -0
- package/src/components/form/CInputGroupText.tsx +3 -2
- package/src/components/form/__tests__/CFormRange.spec.tsx +2 -2
- package/src/components/form/__tests__/CInputGroupText.spec.tsx +9 -0
- package/src/components/form/__tests__/__snapshots__/CInputGroupText.spec.tsx.snap +11 -0
- package/src/components/form/index.ts +4 -0
- package/src/components/header/CHeaderBrand.tsx +3 -2
- package/src/components/link/CLink.tsx +2 -2
- package/src/components/list-group/CListGroupItem.tsx +2 -2
- package/src/components/modal/CModal.tsx +4 -1
- package/src/components/sidebar/CSidebar.tsx +1 -10
- package/src/components/toast/CToastClose.tsx +4 -1
- package/src/utils/index.ts +3 -0
- package/src/utils/isVisible.ts +11 -0
package/README.md
CHANGED
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
Several quick start options are available:
|
|
48
48
|
|
|
49
|
-
- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.
|
|
49
|
+
- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.5.0.zip)
|
|
50
50
|
- Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
|
|
51
51
|
- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
|
|
52
52
|
- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
2
|
+
export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
3
|
+
export type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
|
|
4
4
|
export declare const colorPropType: PropTypes.Requireable<string>;
|
|
5
|
-
export
|
|
5
|
+
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;
|
|
6
6
|
export declare const placementPropType: PropTypes.Requireable<Placements>;
|
|
7
|
-
export
|
|
7
|
+
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;
|
|
8
8
|
export declare const shapePropType: PropTypes.Requireable<string>;
|
|
9
|
-
export
|
|
9
|
+
export type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
|
|
10
10
|
export declare const textColorsPropType: PropTypes.Requireable<string>;
|
|
11
|
-
export
|
|
11
|
+
export type Triggers = 'hover' | 'focus' | 'click';
|
|
12
12
|
export declare const triggerPropType: PropTypes.Requireable<Triggers>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { ElementType } from 'react';
|
|
2
2
|
import { Colors, Shapes } from '../Types';
|
|
3
|
-
|
|
3
|
+
import { CLinkProps } from '../link/CLink';
|
|
4
|
+
export interface CButtonProps extends Omit<CLinkProps, 'size'> {
|
|
4
5
|
/**
|
|
5
6
|
* Toggle the active state for the component.
|
|
6
7
|
*/
|
|
@@ -51,4 +52,4 @@ export interface CButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
51
52
|
*/
|
|
52
53
|
variant?: 'outline' | 'ghost';
|
|
53
54
|
}
|
|
54
|
-
export declare const CButton: React.ForwardRefExoticComponent<CButtonProps & React.RefAttributes<
|
|
55
|
+
export declare const CButton: React.ForwardRefExoticComponent<CButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
@@ -36,6 +36,12 @@ export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
36
36
|
* If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.
|
|
37
37
|
*/
|
|
38
38
|
pause?: boolean | 'hover';
|
|
39
|
+
/**
|
|
40
|
+
* Set whether the carousel should support left/right swipe interactions on touchscreen devices.
|
|
41
|
+
*
|
|
42
|
+
* @since 4.5.0
|
|
43
|
+
*/
|
|
44
|
+
touch?: boolean;
|
|
39
45
|
/**
|
|
40
46
|
* Set type of the transition.
|
|
41
47
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ElementType, HTMLAttributes, RefObject } from 'react';
|
|
2
2
|
import { Placements } from '../Types';
|
|
3
|
-
export
|
|
4
|
-
export
|
|
3
|
+
export type Directions = 'start' | 'end';
|
|
4
|
+
export type Breakpoints = {
|
|
5
5
|
xs: Directions;
|
|
6
6
|
} | {
|
|
7
7
|
sm: Directions;
|
|
@@ -14,7 +14,7 @@ export declare type Breakpoints = {
|
|
|
14
14
|
} | {
|
|
15
15
|
xxl: Directions;
|
|
16
16
|
};
|
|
17
|
-
export
|
|
17
|
+
export type Alignments = Directions | Breakpoints;
|
|
18
18
|
export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
|
|
19
19
|
/**
|
|
20
20
|
* Set aligment of dropdown menu.
|
|
@@ -10,4 +10,4 @@ export interface CDropdownItemProps extends CLinkProps {
|
|
|
10
10
|
*/
|
|
11
11
|
component?: string | ElementType;
|
|
12
12
|
}
|
|
13
|
-
export declare const CDropdownItem: React.ForwardRefExoticComponent<CDropdownItemProps & React.RefAttributes<
|
|
13
|
+
export declare const CDropdownItem: React.ForwardRefExoticComponent<CDropdownItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { Colors, Shapes } from '../Types';
|
|
3
3
|
import { CFormControlValidationProps } from './CFormControlValidation';
|
|
4
|
-
export
|
|
4
|
+
export type ButtonObject = {
|
|
5
5
|
/**
|
|
6
6
|
* Sets the color context of the component to one of CoreUI’s themed colors.
|
|
7
7
|
*
|
|
@@ -5,6 +5,12 @@ export interface CFormControlWrapperProps extends CFormControlValidationProps {
|
|
|
5
5
|
* @ignore
|
|
6
6
|
*/
|
|
7
7
|
children?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* A string of all className you want applied to the floating label wrapper.
|
|
10
|
+
*
|
|
11
|
+
* @since 4.5.0
|
|
12
|
+
*/
|
|
13
|
+
floatingClassName?: string;
|
|
8
14
|
/**
|
|
9
15
|
* Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
|
|
10
16
|
*
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
export interface CFormLabelProps extends
|
|
1
|
+
import React, { LabelHTMLAttributes } from 'react';
|
|
2
|
+
export interface CFormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
3
3
|
/**
|
|
4
4
|
* A string of all className you want applied to the component.
|
|
5
5
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { ElementType,
|
|
2
|
-
export interface CInputGroupTextProps extends
|
|
1
|
+
import React, { ElementType, LabelHTMLAttributes } from 'react';
|
|
2
|
+
export interface CInputGroupTextProps extends LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
|
|
3
3
|
/**
|
|
4
4
|
* A string of all className you want applied to the component.
|
|
5
5
|
*/
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { CForm } from './CForm';
|
|
2
2
|
import { CFormCheck } from './CFormCheck';
|
|
3
|
+
import { CFormControlValidation } from './CFormControlValidation';
|
|
4
|
+
import { CFormControlWrapper } from './CFormControlWrapper';
|
|
3
5
|
import { CFormFeedback } from './CFormFeedback';
|
|
4
6
|
import { CFormFloating } from './CFormFloating';
|
|
5
7
|
import { CFormInput } from './CFormInput';
|
|
@@ -11,4 +13,4 @@ import { CFormText } from './CFormText';
|
|
|
11
13
|
import { CFormTextarea } from './CFormTextarea';
|
|
12
14
|
import { CInputGroup } from './CInputGroup';
|
|
13
15
|
import { CInputGroupText } from './CInputGroupText';
|
|
14
|
-
export { CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CInputGroup, CInputGroupText, };
|
|
16
|
+
export { CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CInputGroup, CInputGroupText, };
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type Span = 'auto' | number | string | boolean | null;
|
|
3
|
+
type BPObject = {
|
|
4
4
|
span?: Span;
|
|
5
5
|
offset?: number | string | null;
|
|
6
6
|
order?: 'first' | 'last' | number | string | null;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
type Col = Span | BPObject;
|
|
9
9
|
export interface CColProps extends HTMLAttributes<HTMLDivElement> {
|
|
10
10
|
/**
|
|
11
11
|
* A string of all className you want applied to the base component.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { ElementType,
|
|
2
|
-
export interface CHeaderBrandProps extends
|
|
1
|
+
import React, { ElementType, AnchorHTMLAttributes } from 'react';
|
|
2
|
+
export interface CHeaderBrandProps extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
|
|
3
3
|
/**
|
|
4
4
|
* A string of all className you want applied to the component.
|
|
5
5
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { AllHTMLAttributes, ElementType } from 'react';
|
|
2
|
-
export interface CLinkProps extends AllHTMLAttributes<
|
|
2
|
+
export interface CLinkProps extends AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
|
|
3
3
|
/**
|
|
4
4
|
* Toggle the active state for the component.
|
|
5
5
|
*/
|
|
@@ -21,4 +21,4 @@ export interface CLinkProps extends AllHTMLAttributes<HTMLElement> {
|
|
|
21
21
|
*/
|
|
22
22
|
href?: string;
|
|
23
23
|
}
|
|
24
|
-
export declare const CLink: React.ForwardRefExoticComponent<CLinkProps & React.RefAttributes<
|
|
24
|
+
export declare const CLink: React.ForwardRefExoticComponent<CLinkProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React, { ElementType,
|
|
1
|
+
import React, { ElementType, AnchorHTMLAttributes } from 'react';
|
|
2
2
|
import { Colors } from '../Types';
|
|
3
|
-
export interface CListGroupItemProps extends
|
|
3
|
+
export interface CListGroupItemProps extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
|
|
4
4
|
/**
|
|
5
5
|
* Toggle the active state for the component.
|
|
6
6
|
*/
|
|
@@ -24,4 +24,4 @@ export interface CListGroupItemProps extends HTMLAttributes<HTMLLIElement | HTML
|
|
|
24
24
|
*/
|
|
25
25
|
component?: string | ElementType;
|
|
26
26
|
}
|
|
27
|
-
export declare const CListGroupItem: React.ForwardRefExoticComponent<CListGroupItemProps & React.RefAttributes<
|
|
27
|
+
export declare const CListGroupItem: React.ForwardRefExoticComponent<CListGroupItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLLIElement>>;
|
|
@@ -26,4 +26,4 @@ export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
|
|
|
26
26
|
*/
|
|
27
27
|
to?: string;
|
|
28
28
|
}
|
|
29
|
-
export declare const CNavLink: React.ForwardRefExoticComponent<CNavLinkProps & React.RefAttributes<
|
|
29
|
+
export declare const CNavLink: React.ForwardRefExoticComponent<CNavLinkProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLLIElement>>;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import React, { ElementType } from 'react';
|
|
2
2
|
import { CCloseButtonProps } from '../close-button/CCloseButton';
|
|
3
|
-
|
|
3
|
+
import type { CButtonProps } from '../button/CButton';
|
|
4
|
+
type CombineButtonProps = CCloseButtonProps & CButtonProps;
|
|
5
|
+
export interface CToastCloseProps extends CombineButtonProps {
|
|
4
6
|
/**
|
|
5
7
|
* Component used for the root node. Either a string to use a HTML element or a component.
|
|
6
8
|
*/
|
|
7
9
|
component?: string | ElementType;
|
|
8
10
|
}
|
|
9
11
|
export declare const CToastClose: React.ForwardRefExoticComponent<CToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
export {};
|