@coreui/react 4.0.0 → 4.1.1

package/README.md

@@ -0,0 +1,157 @@
+<p align="center">
+  <a href="https://coreui.io/">
+    <img
+      src="https://coreui.io/images/brand/coreui-signet.svg"
+      alt="CoreUI logo"
+      width="200"
+    />
+  </a>
+</p>
+
+<h3 align="center">CoreUI for React.js</h3>
+
+<p align="center">
+  React.js Components Library built on top of Bootstrap 5 and TypeScript.
+  <br>
+  <a href="https://coreui.io/react/docs/getting-started/introduction"><strong>Explore CoreUI for React.js docs »</strong></a>
+  <br>
+  <br>
+  <a href="https://github.com/coreui/coreui-react/issues/new?template=bug_report.md">Report bug</a>
+  ·
+  <a href="https://github.com/coreui/coreui-react/issues/new?template=feature_request.md">Request feature</a>
+  ·
+  <a href="https://blog.coreui.io/">Blog</a>
+</p>
+
+
+## Table of contents
+
+- [Quick start](#quick-start)
+- [Status](#status)
+- [What's included](#whats-included)
+- [Bugs and feature requests](#bugs-and-feature-requests)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [Community](#community)
+- [Versioning](#versioning)
+- [Creators](#creators)
+- [Copyright and license](#copyright-and-license)
+
+## Quick start
+
+### Instalation
+
+Several quick start options are available:
+
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.1.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`
+
+Read the [Getting started page](https://coreui.io/react/docs/getting-started/introduction/) for information on the framework contents, templates and examples, and more.
+
+### Stylesheets
+
+React components are styled using `@coreui/coreui` CSS library, but you can use them also with bootstrap CSS library. That is possible because `@coreui/coreui` library is compatible with bootstrap, it just extends its functionalities. The only exception are custom CoreUI components, which don't exist in the Bootstrap ecosystem.
+
+#### CoreUI CSS files
+
+##### Installation
+
+```bash
+yarn add @coreui/coreui
+```
+
+or
+
+```bash
+npm install @coreui/coreui --save
+```
+
+##### Basic usage
+
+```js
+import '@coreui/coreui/dist/css/coreui.min.css'
+```
+
+#### Bootstrap CSS files
+
+##### Installation
+
+```bash
+yarn add bootstrap
+```
+
+or
+
+```bash
+npm install bootstrap
+```
+
+##### Basic usage
+
+```js
+import "bootstrap/dist/css/bootstrap.min.css";
+```
+
+## Status
+
+[![Build Status](https://github.com/coreui/coreui-react/workflows/JS%20Tests/badge.svg?branch=main)](https://github.com/coreui/coreui-react/actions?query=workflow%3AJS+Tests+branch%3Amain)
+[![npm version](https://img.shields.io/npm/v/@coreui/react)](https://www.npmjs.com/package/@coreui/react)
+[![peerDependencies Status](https://img.shields.io/david/peer/coreui/coreui)](https://david-dm.org/coreui/coreui?type=peer)
+[![devDependency Status](https://img.shields.io/david/dev/coreui/coreui)](https://david-dm.org/coreui/coreui?type=dev)
+[![Coverage Status](https://img.shields.io/coveralls/github/coreui/coreui-react/v4)](https://coveralls.io/github/coreui/coreui-react?branch=v4)
+
+## Bugs and feature requests
+
+Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/coreui/coreui-react/issues/new).
+
+## Documentation
+
+The documentation for the CoreUI & CoreUI PRO is hosted at our website [CoreUI for React](https://coreui.io/react/docs/getting-started/introduction)
+
+### Running documentation locally
+
+1. Run `yarn install` or `npm install` to install the Node.js dependencies.
+2. Run `yarn bootstrap` or `npm run bootstrap` to link local packages together and install remaining package dependencies.
+3. From the root directory, run `yarn docs:dev` or `npm run docs:dev` (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
+4. Open `http://localhost:8000/` in your browser, and voilà.
+
+## Contributing
+
+Please read through our [contributing guidelines](https://github.com/coreui/coreui-react/blob/v4/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
+
+Editor preferences are available in the [editor config](https://github.com/coreui/coreui-react/blob/v4/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
+
+## Community
+
+Stay up to date on the development of CoreUI and reach out to the community with these helpful resources.
+
+- Read and subscribe to [The Official CoreUI Blog](https://blog.coreui.io/).
+
+You can also follow [@core_ui on Twitter](https://twitter.com/core_ui).
+
+## Versioning
+
+For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI is maintained under [the Semantic Versioning guidelines](http://semver.org/).
+
+See [the Releases section of our project](https://github.com/coreui/coreui-react/releases) for changelogs for each release version.
+
+## Creators
+
+**Łukasz Holeczek**
+
+- <https://twitter.com/lukaszholeczek>
+- <https://github.com/mrholek>
+
+**Andrzej Kopański**
+
+- <https://github.com/xidedix>
+
+**The CoreUI Team**
+
+- <https://github.com/orgs/coreui/people>
+
+## Copyright and license
+
+Copyright 2021 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-react/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).

package/dist/components/accordion/CAccordionCollapse.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { CCollapseProps } from '../collapse/CCollapse';
-export declare const CAccordionCollapse: React.ForwardRefExoticComponent<CCollapseProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CAccordionCollapse: React.ForwardRefExoticComponent<Omit<CCollapseProps, "horizontal"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/collapse/CCollapse.d.ts

@@ -4,6 +4,10 @@ export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
      * A string of all className you want applied to the base component.
      */
     className?: string;
+    /**
+     * Set horizontal collapsing to transition the width instead of height.
+     */
+    horizontal?: boolean;
     /**
      * Callback fired when the component requests to be hidden.
      */

package/dist/components/form/CFormCheck.d.ts

@@ -39,6 +39,10 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      */
     id?: string;
+    /**
+     * Input Checkbox indeterminate Property.
+     */
+    indeterminate?: boolean;
     /**
      * Group checkboxes or radios on the same horizontal row by adding.
      */

package/dist/components/form/CFormLabel.d.ts

@@ -1,5 +1,5 @@
-import React, { HTMLAttributes } from 'react';
-export interface CFormLabelProps extends HTMLAttributes<HTMLLabelElement> {
+import React, { AllHTMLAttributes } from 'react';
+export interface CFormLabelProps extends AllHTMLAttributes<HTMLLabelElement> {
     /**
      * A string of all className you want applied to the component.
      */

package/dist/components/form/CFormSelect.d.ts

@@ -1,4 +1,9 @@
 import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
+declare type Option = {
+    disabled?: boolean;
+    label?: string;
+    value?: string;
+};
 export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
     /**
      * A string of all className you want applied to the component.
@@ -16,6 +21,13 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
      * Method called immediately after the `value` prop changes.
      */
     onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+     * Examples:
+     * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
+     * - `options={['js', 'html']}`
+     */
+    options?: Option[] | string[];
     /**
      * Size the component small or large.
      */
@@ -32,3 +44,4 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
     value?: string | string[] | number;
 }
 export declare const CFormSelect: React.ForwardRefExoticComponent<CFormSelectProps & React.RefAttributes<HTMLSelectElement>>;
+export {};

package/dist/components/placeholder/CPlaceholder.d.ts

@@ -0,0 +1,51 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+import { Colors } from '../Types';
+export interface CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Set animation type to better convey the perception of something being actively loaded.
+     */
+    animation?: 'glow' | 'wave';
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+     */
+    color?: Colors;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ElementType;
+    /**
+     * Size the component extra small, small, or large.
+     */
+    size?: 'xs' | 'sm' | 'lg';
+    /**
+     * The number of columns on extra small devices (<576px).
+     */
+    xs?: number;
+    /**
+     * The number of columns on small devices (<768px).
+     */
+    sm?: number;
+    /**
+     * The number of columns on medium devices (<992px).
+     */
+    md?: number;
+    /**
+     * The number of columns on large devices (<1200px).
+     */
+    lg?: number;
+    /**
+     * The number of columns on X-Large devices (<1400px).
+     */
+    xl?: number;
+    /**
+     * The number of columns on XX-Large devices (≥1400px).
+     */
+    xxl?: number;
+}
+export declare const CPlaceholder: React.ForwardRefExoticComponent<CPlaceholderProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/popover/CPopover.d.ts

@@ -5,7 +5,7 @@ export interface CPopoverProps {
     /**
      * Content node for your component.
      */
-    content: ReactNode;
+    content: ReactNode | string;
     /**
      * Offset of the popover relative to its target.
      */
@@ -21,7 +21,7 @@ export interface CPopoverProps {
     /**
      * Title node for your component.
      */
-    title?: ReactNode;
+    title?: ReactNode | string;
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      *

package/dist/components/tooltip/CTooltip.d.ts

@@ -5,7 +5,7 @@ export interface CTooltipProps {
     /**
      * Content node for your component.
      */
-    content: ReactNode;
+    content: ReactNode | string;
     /**
      * Callback fired when the component requests to be hidden.
      */

package/dist/index.d.ts

@@ -86,6 +86,7 @@ import { CNavbarText } from './components/navbar/CNavbarText';
 import { CNavbarToggler } from './components/navbar/CNavbarToggler';
 import { CPagination } from './components/pagination/CPagination';
 import { CPaginationItem } from './components/pagination/CPaginationItem';
+import { CPlaceholder } from './components/placeholder/CPlaceholder';
 import { CPopover } from './components/popover/CPopover';
 import { CProgress } from './components/progress/CProgress';
 import { CProgressBar } from './components/progress/CProgressBar';
@@ -116,5 +117,5 @@ import { CToastClose } from './components/toast/CToastClose';
 import { CToastHeader } from './components/toast/CToastHeader';
 import { CToaster } from './components/toast/CToaster';
 import { CTooltip } from './components/tooltip/CTooltip';
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBadge, CBackdrop, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCollapse, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CCol, CContainer, CRow, CFooter, CCardGroup, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CImage, CInputGroup, CInputGroupText, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, CPagination, CPaginationItem, CPopover, CProgress, CProgressBar, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav, CSpinner, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTabContent, CTabPane, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBadge, CBackdrop, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCollapse, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CCol, CContainer, CRow, CFooter, CCardGroup, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CImage, CInputGroup, CInputGroupText, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav, CSpinner, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTabContent, CTabPane, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, };
 export * from './components/';