@coreui/react-pro 4.1.4 → 4.2.0-rc.0

package/src/components/navbar/index.ts

@@ -0,0 +1,7 @@
+import { CNavbar } from './CNavbar'
+import { CNavbarBrand } from './CNavbarBrand'
+import { CNavbarNav } from './CNavbarNav'
+import { CNavbarText } from './CNavbarText'
+import { CNavbarToggler } from './CNavbarToggler'
+
+export { CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler }

package/src/components/offcanvas/COffcanvas.tsx

@@ -137,6 +137,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       <>
         <Transition
           in={_visible}
+          nodeRef={offcanvasRef}
           onEnter={onShow}
           onEntered={() => offcanvasRef.current?.focus()}
           onExit={onHide}

package/src/components/offcanvas/index.ts

@@ -0,0 +1,6 @@
+import { COffcanvas } from './COffcanvas'
+import { COffcanvasBody } from './COffcanvasBody'
+import { COffcanvasHeader } from './COffcanvasHeader'
+import { COffcanvasTitle } from './COffcanvasTitle'
+
+export { COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle }

package/src/components/pagination/index.ts

@@ -0,0 +1,5 @@
+import { CPagination } from './CPagination'
+import { CPaginationItem } from './CPaginationItem'
+import { CSmartPagination } from './CSmartPagination'
+
+export { CPagination, CPaginationItem, CSmartPagination }

package/src/components/picker/CPicker.tsx

@@ -0,0 +1,207 @@
+import React, { forwardRef, ReactNode, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CButton } from '../button/CButton'
+import { CDropdown, CDropdownProps } from '../dropdown/CDropdown'
+import { CDropdownMenu } from '../dropdown/CDropdownMenu'
+import { CDropdownToggle } from '../dropdown/CDropdownToggle'
+
+import { Colors } from '../Types'
+
+export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
+  /**
+   * Toggle visibility or set the content of cancel button.
+   *
+   * @default 'Cancel'
+   */
+  cancelButton?: boolean | ReactNode
+  /**
+   * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   * @default 'primary'
+   */
+  cancelButtonColor?: Colors
+  /**
+   * Size the cancel button small or large.
+   *
+   * @default 'sm'
+   */
+  cancelButtonSize?: 'sm' | 'lg'
+  /**
+   * Set the cancel button variant to an outlined button or a ghost button.
+   *
+   * @default 'ghost'
+   */
+  cancelButtonVariant?: 'outline' | 'ghost'
+  /**
+   * Toggle visibility or set the content of confirm button.
+   *
+   * @default 'OK'
+   */
+  confirmButton?: boolean | ReactNode
+  /**
+   * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   * @default 'primary'
+   */
+  confirmButtonColor?: Colors
+  /**
+   * Size the confirm button small or large.
+   *
+   * @default 'sm'
+   */
+  confirmButtonSize?: 'sm' | 'lg'
+  /**
+   * Set the confirm button variant to an outlined button or a ghost button.
+   */
+  confirmButtonVariant?: 'outline' | 'ghost'
+  /**
+   * Set container type for the component.
+   */
+  container?: 'dropdown' | 'inline'
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean
+  /**
+   * Toggle visibility of footer element or set the content of footer.
+   */
+  footer?: boolean | ReactNode
+  /**
+   * Callback fired when the cancel button has been clicked.
+   */
+  onCancel?: () => void
+  /**
+   * Callback fired when the confirm button has been clicked.
+   */
+  onConfirm?: () => void
+  /**
+   * The content of toggler.
+   */
+  toggler?: ReactNode
+}
+
+export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
+  (
+    {
+      children,
+      cancelButton = 'Cancel',
+      cancelButtonColor = 'primary',
+      cancelButtonSize = 'sm',
+      cancelButtonVariant = 'ghost',
+      confirmButton = 'OK',
+      confirmButtonColor = 'primary',
+      confirmButtonSize = 'sm',
+      confirmButtonVariant,
+      className,
+      container = 'dropdown',
+      disabled,
+      footer,
+      onCancel,
+      onConfirm,
+      onHide,
+      onShow,
+      toggler: Toggler,
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_visible, setVisible] = useState(visible)
+
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
+
+    const Footer = () => (
+      <>
+        {cancelButton && (
+          <CButton
+            color={cancelButtonColor}
+            size={cancelButtonSize}
+            variant={cancelButtonVariant}
+            onClick={() => onCancel && onCancel()}
+          >
+            {cancelButton}
+          </CButton>
+        )}
+        {confirmButton && (
+          <CButton
+            color={confirmButtonColor}
+            size={confirmButtonSize}
+            variant={confirmButtonVariant}
+            onClick={() => {
+              onConfirm && onConfirm()
+              setVisible(false)
+            }}
+          >
+            {confirmButton}
+          </CButton>
+        )}
+      </>
+    )
+
+    const _className = classNames('picker', className)
+
+    switch (container) {
+      case 'inline':
+        return <div className={_className}>{children}</div>
+      default:
+        return (
+          <CDropdown
+            autoClose="outside"
+            className={_className}
+            onHide={() => {
+              setVisible(false)
+              onHide && onHide()
+            }}
+            onShow={() => {
+              setVisible(true)
+              onShow && onShow()
+            }}
+            variant="dropdown"
+            visible={_visible}
+            {...rest}
+            ref={ref}
+          >
+            <CDropdownToggle custom disabled={_visible || disabled}>
+              {Toggler}
+            </CDropdownToggle>
+            <CDropdownMenu component="div">
+              {children}
+              {footer && (
+                <div className="picker-footer">
+                  {typeof footer === 'boolean' ? Footer() : footer}
+                </div>
+              )}
+            </CDropdownMenu>
+          </CDropdown>
+        )
+    }
+  },
+)
+
+CPicker.displayName = 'CPicker'
+
+CPicker.propTypes = {
+  cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  cancelButtonColor: CButton.propTypes?.color,
+  cancelButtonSize: CButton.propTypes?.size,
+  cancelButtonVariant: CButton.propTypes?.variant,
+  confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  confirmButtonColor: CButton.propTypes?.color,
+  confirmButtonSize: CButton.propTypes?.size,
+  confirmButtonVariant: CButton.propTypes?.variant,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  container: PropTypes.oneOf(['dropdown', 'inline']),
+  disabled: PropTypes.bool,
+  footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  toggler: PropTypes.node,
+  ...CDropdown.propTypes,
+}

package/src/components/picker/__tests__/CPicker.spec.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CPicker } from '../CPicker'
+
+test('loads and displays CPicker component', async () => {
+  const { container } = render(<CPicker>Test</CPicker>)
+  expect(container).toMatchSnapshot()
+})

package/src/components/picker/__tests__/__snapshots__/CPicker.spec.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loads and displays CPicker component 1`] = `
+<div>
+  <div
+    class="dropdown picker"
+  >
+    <button
+      aria-expanded="false"
+      class="btn btn-primary dropdown-toggle"
+      tabindex="0"
+      type="button"
+    />
+    <div
+      aria-hidden="true"
+      class="dropdown-menu"
+      role="menu"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;

package/src/components/placeholder/index.ts

@@ -0,0 +1,3 @@
+import { CPlaceholder } from './CPlaceholder'
+
+export { CPlaceholder }

package/src/components/popover/CPopover.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactElement, ReactNode, useState } from 'react'
+import React, { FC, ReactNode, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -9,7 +9,7 @@ import { Transition } from 'react-transition-group'
 import { Triggers, triggerPropType } from '../Types'
 
 export interface CPopoverProps {
-  children: ReactElement
+  children: any
   /**
    * Content node for your component.
    */
@@ -59,6 +59,7 @@ export const CPopover: FC<CPopoverProps> = ({
   ...rest
 }) => {
   const [_visible, setVisible] = useState(visible)
+  const popoverRef = useRef()
 
   const getTransitionClass = (state: string) => {
     return state === 'entering'
@@ -72,75 +73,82 @@ export const CPopover: FC<CPopoverProps> = ({
 
   return (
     <Manager>
-      <Reference>
-        {({ ref }) =>
-          React.cloneElement(children, {
-            ref: ref,
-            ...((trigger === 'click' || trigger.includes('click')) && {
-              onClick: () => setVisible(!_visible),
-            }),
-            ...((trigger === 'focus' || trigger.includes('focus')) && {
-              onFocus: () => setVisible(true),
-              onBlur: () => setVisible(false),
-            }),
-            ...((trigger === 'hover' || trigger.includes('hover')) && {
-              onMouseEnter: () => setVisible(true),
-              onMouseLeave: () => setVisible(false),
-            }),
-          })
-        }
-      </Reference>
-      {typeof window !== 'undefined' &&
-        createPortal(
-          <Transition
-            in={_visible}
-            onEnter={onShow}
-            onExit={onHide}
-            mountOnEnter
-            timeout={{
-              enter: 0,
-              exit: 200,
-            }}
-            unmountOnExit
-          >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return (
-                <Popper
-                  placement={placement}
-                  modifiers={[
-                    {
-                      name: 'offset',
-                      options: {
-                        offset: offset,
+      <>
+        <Reference>
+          {({ ref }) =>
+            React.cloneElement(children, {
+              ref: ref,
+              ...((trigger === 'click' || trigger.includes('click')) && {
+                onClick: () => setVisible(!_visible),
+              }),
+              ...((trigger === 'focus' || trigger.includes('focus')) && {
+                onFocus: () => setVisible(true),
+                onBlur: () => setVisible(false),
+              }),
+              ...((trigger === 'hover' || trigger.includes('hover')) && {
+                onMouseEnter: () => setVisible(true),
+                onMouseLeave: () => setVisible(false),
+              }),
+            })
+          }
+        </Reference>
+        {typeof window !== 'undefined' &&
+          createPortal(
+            <Transition
+              in={_visible}
+              mountOnEnter
+              nodeRef={popoverRef}
+              onEnter={onShow}
+              onExit={onHide}
+              timeout={{
+                enter: 0,
+                exit: 200,
+              }}
+              unmountOnExit
+            >
+              {(state) => {
+                const transitionClass = getTransitionClass(state)
+                return (
+                  <Popper
+                    placement={placement}
+                    modifiers={[
+                      {
+                        name: 'offset',
+                        options: {
+                          offset: offset,
+                        },
                       },
-                    },
-                  ]}
-                >
-                  {({ arrowProps, style, ref }) => (
-                    <div
-                      className={classNames(
-                        `popover bs-popover-${
-                          placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                        }`,
-                        transitionClass,
-                      )}
-                      ref={ref}
-                      role="tooltip"
-                      style={style}
-                      {...rest}
-                    >
-                      <div className="popover-arrow" {...arrowProps}></div>
-                      <div className="popover-header">{title}</div>
-                      <div className="popover-body">{content}</div>
-                    </div>
-                  )}
-                </Popper>
-              )
-            }}
-          </Transition>,
-          document.body,
-        )}
+                    ]}
+                  >
+                    {({ arrowProps, style, ref }) => (
+                      <div
+                        className={classNames(
+                          `popover bs-popover-${
+                            placement === 'left'
+                              ? 'start'
+                              : placement === 'right'
+                              ? 'end'
+                              : placement
+                          }`,
+                          transitionClass,
+                        )}
+                        ref={ref}
+                        role="tooltip"
+                        style={style}
+                        {...rest}
+                      >
+                        <div className="popover-arrow" {...arrowProps}></div>
+                        <div className="popover-header">{title}</div>
+                        <div className="popover-body">{content}</div>
+                      </div>
+                    )}
+                  </Popper>
+                )
+              }}
+            </Transition>,
+            document.body,
+          )}
+      </>
     </Manager>
   )
 }

package/src/components/popover/index.ts

@@ -0,0 +1,3 @@
+import { CPopover } from './CPopover'
+
+export { CPopover }

package/src/components/progress/index.ts

@@ -0,0 +1,4 @@
+import { CProgress } from './CProgress'
+import { CProgressBar } from './CProgressBar'
+
+export { CProgress, CProgressBar }

package/src/components/sidebar/index.ts

@@ -0,0 +1,8 @@
+import { CSidebar } from './CSidebar'
+import { CSidebarBrand } from './CSidebarBrand'
+import { CSidebarFooter } from './CSidebarFooter'
+import { CSidebarToggler } from './CSidebarToggler'
+import { CSidebarHeader } from './CSidebarHeader'
+import { CSidebarNav } from './CSidebarNav'
+
+export { CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav }

package/src/components/smart-table/index.ts

@@ -0,0 +1,3 @@
+import { CSmartTable } from './CSmartTable'
+
+export { CSmartTable }

package/src/components/spinner/index.ts

@@ -0,0 +1,3 @@
+import { CSpinner } from './CSpinner'
+
+export { CSpinner }

package/src/components/table/index.ts

@@ -0,0 +1,19 @@
+import { CTable } from './CTable'
+import { CTableBody } from './CTableBody'
+import { CTableCaption } from './CTableCaption'
+import { CTableDataCell } from './CTableDataCell'
+import { CTableFoot } from './CTableFoot'
+import { CTableHead } from './CTableHead'
+import { CTableHeaderCell } from './CTableHeaderCell'
+import { CTableRow } from './CTableRow'
+
+export {
+  CTable,
+  CTableBody,
+  CTableCaption,
+  CTableDataCell,
+  CTableFoot,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow,
+}

package/src/components/tabs/CTabPane.tsx

@@ -1,8 +1,9 @@
-import React, { HTMLAttributes, forwardRef } from 'react'
+import React, { HTMLAttributes, forwardRef, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
+import { useForkedRef } from '../../utils/hooks'
 export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -24,6 +25,9 @@ export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
   ({ children, className, onHide, onShow, visible, ...rest }, ref) => {
+    const tabPaneRef = useRef()
+    const forkedRef = useForkedRef(ref, tabPaneRef)
+
     const getTransitionClass = (state: string) => {
       return state === 'entered' && 'show'
     }
@@ -37,11 +41,11 @@ export const CTabPane = forwardRef<HTMLDivElement, CTabPaneProps>(
       className,
     )
     return (
-      <Transition in={visible} onEnter={onShow} onExit={onHide} timeout={150}>
+      <Transition in={visible} nodeRef={tabPaneRef} onEnter={onShow} onExit={onHide} timeout={150}>
         {(state) => {
           const transitionClass = getTransitionClass(state)
           return (
-            <div className={classNames(_className, transitionClass)} {...rest} ref={ref}>
+            <div className={classNames(_className, transitionClass)} {...rest} ref={forkedRef}>
               {children}
             </div>
           )

package/src/components/tabs/index.ts

@@ -0,0 +1,4 @@
+import { CTabContent } from './CTabContent'
+import { CTabPane } from './CTabPane'
+
+export { CTabContent, CTabPane }