@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.
Files changed (50) hide show
  1. package/README.md +1 -1
  2. package/dist/components/Types.d.ts +6 -6
  3. package/dist/components/button/CButton.d.ts +4 -3
  4. package/dist/components/carousel/CCarousel.d.ts +6 -0
  5. package/dist/components/dropdown/CDropdown.d.ts +3 -3
  6. package/dist/components/dropdown/CDropdownItem.d.ts +1 -1
  7. package/dist/components/form/CFormCheck.d.ts +1 -1
  8. package/dist/components/form/CFormControlWrapper.d.ts +6 -0
  9. package/dist/components/form/CFormLabel.d.ts +2 -2
  10. package/dist/components/form/CFormRange.d.ts +1 -1
  11. package/dist/components/form/CFormSelect.d.ts +1 -1
  12. package/dist/components/form/CInputGroupText.d.ts +2 -2
  13. package/dist/components/form/index.d.ts +3 -1
  14. package/dist/components/grid/CCol.d.ts +3 -3
  15. package/dist/components/grid/CRow.d.ts +1 -1
  16. package/dist/components/header/CHeaderBrand.d.ts +2 -2
  17. package/dist/components/link/CLink.d.ts +2 -2
  18. package/dist/components/list-group/CListGroupItem.d.ts +3 -3
  19. package/dist/components/nav/CNavLink.d.ts +1 -1
  20. package/dist/components/toast/CToastClose.d.ts +4 -1
  21. package/dist/components/widgets/CWidgetStatsD.d.ts +1 -1
  22. package/dist/index.es.js +652 -628
  23. package/dist/index.es.js.map +1 -1
  24. package/dist/index.js +944 -925
  25. package/dist/index.js.map +1 -1
  26. package/dist/utils/hooks/useForkedRef.d.ts +1 -1
  27. package/dist/utils/index.d.ts +2 -0
  28. package/dist/utils/isVisible.d.ts +2 -0
  29. package/package.json +9 -10
  30. package/src/components/button/CButton.tsx +3 -3
  31. package/src/components/carousel/CCarousel.tsx +38 -10
  32. package/src/components/form/CFormControlWrapper.tsx +20 -1
  33. package/src/components/form/CFormInput.tsx +2 -0
  34. package/src/components/form/CFormLabel.tsx +2 -2
  35. package/src/components/form/CFormRange.tsx +1 -1
  36. package/src/components/form/CFormSelect.tsx +2 -0
  37. package/src/components/form/CFormTextarea.tsx +2 -0
  38. package/src/components/form/CInputGroupText.tsx +3 -2
  39. package/src/components/form/__tests__/CFormRange.spec.tsx +2 -2
  40. package/src/components/form/__tests__/CInputGroupText.spec.tsx +9 -0
  41. package/src/components/form/__tests__/__snapshots__/CInputGroupText.spec.tsx.snap +11 -0
  42. package/src/components/form/index.ts +4 -0
  43. package/src/components/header/CHeaderBrand.tsx +3 -2
  44. package/src/components/link/CLink.tsx +2 -2
  45. package/src/components/list-group/CListGroupItem.tsx +2 -2
  46. package/src/components/modal/CModal.tsx +4 -1
  47. package/src/components/sidebar/CSidebar.tsx +1 -10
  48. package/src/components/toast/CToastClose.tsx +4 -1
  49. package/src/utils/index.ts +3 -0
  50. 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.4.0.zip)
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 declare type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
3
- export declare type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
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 declare 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;
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 declare type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
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 declare type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
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 declare type Triggers = 'hover' | 'focus' | 'click';
11
+ export type Triggers = 'hover' | 'focus' | 'click';
12
12
  export declare const triggerPropType: PropTypes.Requireable<Triggers>;
@@ -1,6 +1,7 @@
1
- import React, { ButtonHTMLAttributes, ElementType } from 'react';
1
+ import React, { ElementType } from 'react';
2
2
  import { Colors, Shapes } from '../Types';
3
- export interface CButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
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<HTMLAnchorElement | HTMLButtonElement>>;
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 declare type Directions = 'start' | 'end';
4
- export declare type Breakpoints = {
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 declare type Alignments = Directions | Breakpoints;
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<HTMLAnchorElement | HTMLButtonElement>>;
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 declare type ButtonObject = {
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, { AllHTMLAttributes } from 'react';
2
- export interface CFormLabelProps extends AllHTMLAttributes<HTMLLabelElement> {
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
  */
@@ -33,7 +33,7 @@ export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
33
33
  /**
34
34
  * Specifies the interval between legal numbers in the component.
35
35
  */
36
- steps: number;
36
+ step?: number;
37
37
  /**
38
38
  * The `value` attribute of component.
39
39
  *
@@ -1,6 +1,6 @@
1
1
  import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
2
2
  import { CFormControlWrapperProps } from './CFormControlWrapper';
3
- declare type Option = {
3
+ type Option = {
4
4
  disabled?: boolean;
5
5
  label?: string;
6
6
  value?: string;
@@ -1,5 +1,5 @@
1
- import React, { ElementType, HTMLAttributes } from 'react';
2
- export interface CInputGroupTextProps extends HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
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
- declare type Span = 'auto' | number | string | boolean | null;
3
- declare type BPObject = {
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
- declare type Col = Span | BPObject;
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
1
  import React, { HTMLAttributes } from 'react';
2
- export declare type BPObject = {
2
+ export type BPObject = {
3
3
  cols?: 'auto' | number | string | null;
4
4
  gutter?: number | string | null;
5
5
  gutterX?: number | string | null;
@@ -1,5 +1,5 @@
1
- import React, { ElementType, HTMLAttributes } from 'react';
2
- export interface CHeaderBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
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<HTMLElement> {
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<HTMLAnchorElement | HTMLButtonElement>>;
24
+ export declare const CLink: React.ForwardRefExoticComponent<CLinkProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
@@ -1,6 +1,6 @@
1
- import React, { ElementType, HTMLAttributes } from 'react';
1
+ import React, { ElementType, AnchorHTMLAttributes } from 'react';
2
2
  import { Colors } from '../Types';
3
- export interface CListGroupItemProps extends HTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
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<HTMLAnchorElement | HTMLButtonElement | HTMLLIElement>>;
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<HTMLAnchorElement | HTMLButtonElement | HTMLLIElement>>;
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
- export interface CToastCloseProps extends CCloseButtonProps {
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 {};
@@ -1,6 +1,6 @@
1
1
  import React, { HTMLAttributes, ReactNode } from 'react';
2
2
  import { Colors } from '../Types';
3
- declare type Value = {
3
+ type Value = {
4
4
  title?: string | ReactNode;
5
5
  value?: number | string | ReactNode;
6
6
  };