@coreui/react-pro 4.2.0-beta.0 → 4.2.0

package/src/components/picker/CPicker.tsx

@@ -7,11 +7,57 @@ 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'> {
   /**
-   * Cancel button text.
+   * 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'
    */
-  cancelButtonText?: ReactNode
+  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.
    */
@@ -25,17 +71,17 @@ export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
    */
   footer?: boolean | ReactNode
   /**
-   * Ok button text
+   * Add custom elements to the footer.
    */
-  okButtonText?: ReactNode
+  footerContent?: ReactNode
   /**
    * Callback fired when the cancel button has been clicked.
    */
-  onCancelClick?: () => void
+  onCancel?: () => void
   /**
-   * Callback fired when the ok button has been clicked.
+   * Callback fired when the confirm button has been clicked.
    */
-  onOkClick?: () => void
+  onConfirm?: () => void
   /**
    * The content of toggler.
    */
@@ -46,14 +92,21 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
   (
     {
       children,
-      cancelButtonText = 'Cancel',
+      cancelButton = 'Cancel',
+      cancelButtonColor = 'primary',
+      cancelButtonSize = 'sm',
+      cancelButtonVariant = 'ghost',
+      confirmButton = 'OK',
+      confirmButtonColor = 'primary',
+      confirmButtonSize = 'sm',
+      confirmButtonVariant,
       className,
       container = 'dropdown',
       disabled,
       footer,
-      okButtonText = 'OK',
-      onCancelClick,
-      onOkClick,
+      footerContent,
+      onCancel,
+      onConfirm,
       onHide,
       onShow,
       toggler: Toggler,
@@ -70,24 +123,30 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
 
     const Footer = () => (
       <>
-        <CButton
-          color="primary"
-          size="sm"
-          variant="ghost"
-          onClick={() => onCancelClick && onCancelClick()}
-        >
-          {cancelButtonText}
-        </CButton>
-        <CButton
-          color="primary"
-          size="sm"
-          onClick={() => {
-            onOkClick && onOkClick()
-            setVisible(false)
-          }}
-        >
-          {okButtonText}
-        </CButton>
+        {footerContent}
+        {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>
+        )}
       </>
     )
 
@@ -134,9 +193,22 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
 CPicker.displayName = 'CPicker'
 
 CPicker.propTypes = {
-  ...CDropdown.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,
-  onCancelClick: PropTypes.func,
-  onOkClick: PropTypes.func,
+  footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  footerContent: 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,15 +1,16 @@
-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'
-import { Manager, Popper, Reference } from 'react-popper'
+import PropTypes from 'prop-types'
+import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-// import { CPopoverContent } from './CPopoverContent'
 import { Triggers, triggerPropType } from '../Types'
 
 export interface CPopoverProps {
-  children: ReactElement
+  // TODO: find solution to not use any
+  children: any
   /**
    * Content node for your component.
    */
@@ -49,16 +50,33 @@ export interface CPopoverProps {
 export const CPopover: FC<CPopoverProps> = ({
   children,
   content,
-  placement = 'top',
   offset = [0, 8],
   onHide,
   onShow,
+  placement = 'top',
   title,
   trigger = 'click',
   visible,
   ...rest
 }) => {
   const [_visible, setVisible] = useState(visible)
+  const popoverRef = useRef()
+
+  const [referenceElement, setReferenceElement] = useState(null)
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [
+      { name: 'arrow', options: { element: arrowElement } },
+      {
+        name: 'offset',
+        options: {
+          offset: offset,
+        },
+      },
+    ],
+    placement: placement,
+  })
 
   const getTransitionClass = (state: string) => {
     return state === 'entering'
@@ -71,32 +89,29 @@ 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>
+    <>
+      {React.cloneElement(children, {
+        ref: setReferenceElement,
+        ...((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),
+        }),
+      })}
       {typeof window !== 'undefined' &&
         createPortal(
           <Transition
             in={_visible}
+            mountOnEnter
+            nodeRef={popoverRef}
             onEnter={onShow}
             onExit={onHide}
-            mountOnEnter
             timeout={{
               enter: 0,
               exit: 200,
@@ -106,52 +121,39 @@ export const CPopover: FC<CPopoverProps> = ({
             {(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>
+                <div
+                  className={classNames(
+                    `popover bs-popover-${
+                      placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                    }`,
+                    transitionClass,
                   )}
-                </Popper>
+                  ref={setPopperElement}
+                  role="tooltip"
+                  style={styles.popper}
+                  {...attributes.popper}
+                  {...rest}
+                >
+                  <div className="popover-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                  <div className="popover-header">{title}</div>
+                  <div className="popover-body">{content}</div>
+                </div>
               )
             }}
           </Transition>,
           document.body,
         )}
-    </Manager>
+    </>
   )
 }
 
 CPopover.propTypes = {
   children: PropTypes.any,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,
+  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   trigger: triggerPropType,
   visible: PropTypes.bool,

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/CSmartTable.tsx

@@ -340,7 +340,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     }, [_items])
 
     return (
-      <React.Fragment>
+      <>
         <div {...rest} ref={ref}>
           {(itemsPerPageSelect || tableFilter || cleaner) && (
             <div className="row my-2 mx-0">
@@ -460,7 +460,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
             </div>
           </div>
         )}
-      </React.Fragment>
+      </>
     )
   },
 )

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 }