@coreui/react 4.0.0 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -26,7 +26,7 @@
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/",
     "src/"
@@ -39,18 +39,18 @@
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.31",
-    "@types/react-dom": "^17.0.10",
-    "@types/react-transition-group": "^4.4.3",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.58.0",
+    "rollup": "^2.59.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "typescript": "^4.4.4"
   },

package/src/components/form/CFormCheck.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { useForkedRef } from '../../utils/hooks'
 import { Colors, Shapes } from '../Types'
 
 import { CFormLabel } from './CFormLabel'
@@ -46,6 +47,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.
    */
@@ -70,9 +75,30 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
 
 export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
   (
-    { className, button, hitArea, id, inline, invalid, label, type = 'checkbox', valid, ...rest },
+    {
+      className,
+      button,
+      hitArea,
+      id,
+      indeterminate,
+      inline,
+      invalid,
+      label,
+      type = 'checkbox',
+      valid,
+      ...rest
+    },
     ref,
   ) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const forkedRef = useForkedRef(ref, inputRef)
+
+    useEffect(() => {
+      if (inputRef.current && indeterminate) {
+        inputRef.current.indeterminate = indeterminate
+      }
+    }, [indeterminate])
+
     const _className = classNames(
       'form-check',
       {
@@ -102,7 +128,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
     )
 
     const formControl = () => {
-      return <input type={type} className={inputClassName} id={id} {...rest} ref={ref} />
+      return <input type={type} className={inputClassName} id={id} {...rest} ref={forkedRef} />
     }
 
     const formLabel = () => {
@@ -141,6 +167,7 @@ CFormCheck.propTypes = {
   className: PropTypes.string,
   hitArea: PropTypes.oneOf(['full']),
   id: PropTypes.string,
+  indeterminate: PropTypes.bool,
   inline: PropTypes.bool,
   invalid: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

package/src/components/form/CFormSelect.tsx

@@ -2,6 +2,11 @@ import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+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.
@@ -19,6 +24,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.
    */
@@ -36,7 +48,7 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
 }
 
 export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
-  ({ children, className, htmlSize, invalid, size, valid, ...rest }, ref) => {
+  ({ children, className, htmlSize, invalid, options, size, valid, ...rest }, ref) => {
     const _className = classNames(
       'form-select',
       {
@@ -48,7 +60,20 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
     )
     return (
       <select className={_className} size={htmlSize} {...rest} ref={ref}>
-        {children}
+        {options
+          ? options.map((option, index) => {
+              return (
+                <option
+                  {...(typeof option === 'object' &&
+                    option.disabled && { disabled: option.disabled })}
+                  {...(typeof option === 'object' && option.value && { value: option.value })}
+                  key={index}
+                >
+                  {typeof option === 'string' ? option : option.label}
+                </option>
+              )
+            })
+          : children}
       </select>
     )
   },
@@ -59,6 +84,7 @@ CFormSelect.propTypes = {
   className: PropTypes.string,
   htmlSize: PropTypes.number,
   invalid: PropTypes.bool,
+  options: PropTypes.array,
   size: PropTypes.oneOf(['sm', 'lg']),
   valid: PropTypes.bool,
 }