@coreui/react 4.0.0-rc.4 → 4.0.1

package/package.json

@@ -1,99 +1,61 @@
 {
   "name": "@coreui/react",
-  "version": "4.0.0-rc.4",
-  "config": {
-    "version_short": "4.0"
+  "version": "4.0.1",
+  "description": "UI Components Library for React.js",
+  "keywords": [
+    "react",
+    "react-component",
+    "react component",
+    "react bootstrap",
+    "bootstrap react",
+    "ui library",
+    "ui components",
+    "component library",
+    "components"
+  ],
+  "homepage": "https://coreui.io/react/",
+  "bugs": {
+    "url": "https://github.com/coreui/coreui-react/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/coreui/coreui-react.git"
   },
-  "description": "",
   "license": "MIT",
+  "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/",
-    "src/components/",
-    "src/utils/",
-    "src/index.ts",
-    "tsconfig.json",
-    "package.json"
+    "src/"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "docs:api": "rimraf \"content/docs/$npm_package_config_version_short/api/*\" & node build/api.js",
-    "docs:build": "gatsby build --prefix-paths",
-    "docs:dist": "run-s docs:api docs:build",
-    "docs:dev": "gatsby develop",
-    "docs:serve": "gatsby serve",
-    "lint": "eslint \"src/components/**/*.{js,ts,tsx}\"",
-    "test": "jest --coverage",
-    "test:update": "jest --coverage --updateSnapshot"
-  },
-  "peerDependencies": {
-    "@coreui/coreui": "^4.0.4",
-    "react": "^17",
-    "react-dom": "^17"
+    "build": "rollup -c"
   },
   "devDependencies": {
-    "@coreui/coreui": "^4.0.4",
-    "@coreui/icons": "^2.0.1",
-    "@coreui/icons-react": "^2.0.0-rc.5",
-    "@coreui/react-chartjs": "^2.0.0-rc.1",
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
     "@popperjs/core": "^2.10.2",
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.27",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-helmet": "^6.1.3",
-    "@types/react-transition-group": "^4.4.3",
-    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.32.0",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsdoc": "^36.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "gatsby": "^3.14.1",
-    "gatsby-plugin-google-gtag": "3",
-    "gatsby-plugin-manifest": "^3.14.0",
-    "gatsby-plugin-mdx": "^2.14.0",
-    "gatsby-plugin-sass": "4",
-    "gatsby-plugin-sitemap": "4",
-    "gatsby-remark-autolink-headers": "^4.11.0",
-    "gatsby-source-filesystem": "^3.14.0",
-    "glob": "^7.2.0",
-    "globby": "^11.0.4",
-    "jest": "^27.2.4",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.1",
-    "prism-react-renderer": "^1.2.1",
-    "prismjs": "^1.25.0",
-    "react": "^17.0.1",
-    "react-docgen-typescript": "^2.1.0",
-    "react-dom": "^17.0.1",
-    "react-github-btn": "^1.2.1",
-    "react-helmet": "^6.1.0",
+    "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",
-    "remark-html": "^13.0.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.56.22.56.2",
+    "rollup": "^2.59.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.42.1",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.4"
   },
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "jsdom",
-    "testPathIgnorePatterns": [
-      "dist/"
-    ]
+  "peerDependencies": {
+    "react": "^17",
+    "react-dom": "^17"
   }
 }

package/src/components/alert/CAlert.tsx

@@ -60,7 +60,6 @@ export const CAlert = forwardRef<HTMLDivElement, CAlertProps>(
       variant === 'solid' ? `bg-${color} text-white` : `alert-${color}`,
       {
         'alert-dismissible fade': dismissible,
-        // show: _visible,
       },
       className,
     )

package/src/components/dropdown/CDropdown.tsx

@@ -136,14 +136,17 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     )
 
     useEffect(() => {
-      window.addEventListener('click', handleClickOutside)
-      window.addEventListener('keyup', handleKeyup)
+      _visible &&
+        setTimeout(() => {
+          window.addEventListener('click', handleClickOutside)
+          window.addEventListener('keyup', handleKeyup)
+        })
 
       return () => {
         window.removeEventListener('click', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)
       }
-    })
+    }, [_visible])
 
     useEffect(() => {
       setVisible(visible)
@@ -165,24 +168,23 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       }
     }
 
+    const dropdownContent = () => {
+      return variant === 'input-group' ? (
+        <>{children}</>
+      ) : (
+        <Component className={_className} {...rest} ref={forkedRef}>
+          {children}
+        </Component>
+      )
+    }
+
     return popper ? (
       <CDropdownContext.Provider value={contextValues}>
-        <Manager>
-          {/* TODO: find solution how to handle click outside */}
-          {variant === 'input-group' ? (
-            <>{children}</>
-          ) : (
-            <Component className={_className} {...rest} ref={forkedRef}>
-              {children}
-            </Component>
-          )}
-        </Manager>
+        <Manager>{dropdownContent()}</Manager>
       </CDropdownContext.Provider>
     ) : (
       <CDropdownContext.Provider value={contextValues}>
-        <Component className={_className} {...rest} ref={forkedRef}>
-          {children}
-        </Component>
+        {dropdownContent()}
       </CDropdownContext.Provider>
     )
   },

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,
 }

package/src/components/popover/CPopover.tsx

@@ -1,10 +1,11 @@
 import React, { FC, ReactElement, ReactNode, 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 { Transition } from 'react-transition-group'
 
-import { CPopoverContent } from './CPopoverContent'
+// import { CPopoverContent } from './CPopoverContent'
 import { Triggers, triggerPropType } from '../Types'
 
 export interface CPopoverProps {
@@ -38,7 +39,7 @@ export interface CPopoverProps {
   /**
    * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
    */
-  placement?: 'top' | 'right' | 'bottom' | 'left'
+  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
   /**
    * Toggle the visibility of popover component.
    */
@@ -47,10 +48,12 @@ export interface CPopoverProps {
 
 export const CPopover: FC<CPopoverProps> = ({
   children,
+  content,
   placement = 'top',
   offset = [0, 8],
   onHide,
   onShow,
+  title,
   trigger = 'click',
   visible,
   ...rest
@@ -114,15 +117,23 @@ export const CPopover: FC<CPopoverProps> = ({
                     },
                   ]}
                 >
-                  {(p) => (
-                    <CPopoverContent
-                      transitionClass={transitionClass}
-                      placementClassNamePostfix={
-                        placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                      }
+                  {({ arrowProps, style, ref }) => (
+                    <div
+                      className={classNames(
+                        `popover bs-popover-${
+                          placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                        }`,
+                        transitionClass,
+                      )}
+                      ref={ref}
+                      role="tooltip"
+                      style={style}
                       {...rest}
-                      {...p}
-                    ></CPopoverContent>
+                    >
+                      <div className="popover-arrow" {...arrowProps}></div>
+                      <div className="popover-header">{title}</div>
+                      <div className="popover-body">{content}</div>
+                    </div>
                   )}
                 </Popper>
               )
@@ -136,10 +147,12 @@ export const CPopover: FC<CPopoverProps> = ({
 
 CPopover.propTypes = {
   children: PropTypes.any,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  content: PropTypes.node,
+  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,
+  title: PropTypes.string,
   trigger: triggerPropType,
   visible: PropTypes.bool,
 }

package/src/components/tooltip/CTooltip.tsx

@@ -1,10 +1,11 @@
 import React, { FC, ReactElement, ReactNode, useState } from 'react'
-import PropTypes from 'prop-types'
 import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import { Manager, Popper, Reference } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-import { CTooltipContent } from './CTooltipContent'
+// import { CTooltipContent } from './CTooltipContent'
 import { Triggers, triggerPropType } from '../Types'
 
 export interface CTooltipProps {
@@ -30,7 +31,7 @@ export interface CTooltipProps {
   /**
    * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
    */
-  placement?: 'top' | 'right' | 'bottom' | 'left'
+  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
   /**
    * Toggle the visibility of popover component.
    */
@@ -39,6 +40,7 @@ export interface CTooltipProps {
 
 export const CTooltip: FC<CTooltipProps> = ({
   children,
+  content,
   placement = 'top',
   onHide,
   onShow,
@@ -95,15 +97,22 @@ export const CTooltip: FC<CTooltipProps> = ({
               const transitionClass = getTransitionClass(state)
               return (
                 <Popper placement={placement}>
-                  {(p) => (
-                    <CTooltipContent
-                      transitionClass={transitionClass}
-                      placementClassNamePostfix={
-                        placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                      }
+                  {({ arrowProps, style, ref }) => (
+                    <div
+                      className={classNames(
+                        `tooltip bs-tooltip-${
+                          placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
+                        }`,
+                        transitionClass,
+                      )}
+                      ref={ref}
+                      role="tooltip"
+                      style={style}
                       {...rest}
-                      {...p}
-                    ></CTooltipContent>
+                    >
+                      <div className="tooltip-arrow" {...arrowProps}></div>
+                      <div className="tooltip-inner">{content}</div>
+                    </div>
                   )}
                 </Popper>
               )
@@ -117,7 +126,8 @@ export const CTooltip: FC<CTooltipProps> = ({
 
 CTooltip.propTypes = {
   children: PropTypes.any,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  content: PropTypes.node,
+  placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   trigger: triggerPropType,

package/src/index.ts

@@ -87,7 +87,6 @@ import { CNavbarToggler } from './components/navbar/CNavbarToggler'
 import { CPagination } from './components/pagination/CPagination'
 import { CPaginationItem } from './components/pagination/CPaginationItem'
 import { CPopover } from './components/popover/CPopover'
-import { CPopoverContent } from './components/popover/CPopoverContent'
 import { CProgress } from './components/progress/CProgress'
 import { CProgressBar } from './components/progress/CProgressBar'
 import { CSidebar } from './components/sidebar/CSidebar'
@@ -117,7 +116,6 @@ import { CToastClose } from './components/toast/CToastClose'
 import { CToastHeader } from './components/toast/CToastHeader'
 import { CToaster } from './components/toast/CToaster'
 import { CTooltip } from './components/tooltip/CTooltip'
-import { CTooltipContent } from './components/tooltip/CTooltipContent'
 
 export {
   CAccordion,
@@ -209,7 +207,6 @@ export {
   CPagination,
   CPaginationItem,
   CPopover,
-  CPopoverContent,
   CProgress,
   CProgressBar,
   COffcanvas,
@@ -239,7 +236,6 @@ export {
   CToastHeader,
   CToaster,
   CTooltip,
-  CTooltipContent,
 }
 
 export * from './components/'

package/dist/components/carousel/CCarouselControl.d.ts

@@ -1,16 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-declare type Direction = 'prev' | 'next';
-export interface CCarouselControlProps extends HTMLAttributes<HTMLButtonElement> {
-    /**
-     * A string of all className you want applied to the base component. [docs]
-     */
-    className?: string;
-    /**
-     *  Direction. [docs]
-     *
-     * @type 'prev' | 'next'
-     */
-    direction: Direction;
-}
-export declare const CCarouselControl: React.ForwardRefExoticComponent<CCarouselControlProps & React.RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/components/carousel/CCarouselIndicators.d.ts

@@ -1,12 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-export interface CCarouselIndicatorsProps extends HTMLAttributes<HTMLOListElement> {
-    /**
-     * A string of all className you want applied to the base component. [docs]
-     */
-    className?: string;
-    /**
-     * Indicators section user classes. [docs]
-     */
-    indicatorsClass?: string;
-}
-export declare const CCarouselIndicators: React.ForwardRefExoticComponent<CCarouselIndicatorsProps & React.RefAttributes<HTMLOListElement>>;

package/dist/components/carousel/CCarouselInner.d.ts

@@ -1,8 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-export interface CCarouselInnerProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * A string of all className you want applied to the base component. [docs]
-     */
-    className?: string;
-}
-export declare const CCarouselInner: React.ForwardRefExoticComponent<CCarouselInnerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { CPopoverProps } from './CPopover';
-import { PopperChildrenProps } from 'react-popper';
-interface CPopoverContentProps extends Omit<CPopoverProps, 'placement' | 'children' | 'trigger'>, Omit<PopperChildrenProps, 'placementPostfix' | 'style'> {
-    transitionClass?: string;
-    style?: CSSProperties;
-    placementClassNamePostfix?: string;
-}
-export declare const CPopoverContent: React.ForwardRefExoticComponent<Pick<CPopoverContentProps, "style" | "title" | "visible" | "onHide" | "onShow" | "content" | "placement" | "arrowProps" | "forceUpdate" | "hasPopperEscaped" | "isReferenceHidden" | "update" | "offset" | "placementClassNamePostfix" | "transitionClass"> & React.RefAttributes<HTMLDivElement>>;
-export {};

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

@@ -1,10 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { CTooltipProps } from './CTooltip';
-import { PopperChildrenProps } from 'react-popper';
-interface CTooltipContentProps extends Omit<CTooltipProps, 'placement' | 'children' | 'trigger'>, Omit<PopperChildrenProps, 'placementPostfix' | 'style'> {
-    transitionClass?: string;
-    style?: CSSProperties;
-    placementClassNamePostfix?: string;
-}
-export declare const CTooltipContent: React.ForwardRefExoticComponent<Pick<CTooltipContentProps, "style" | "visible" | "onHide" | "onShow" | "content" | "placement" | "arrowProps" | "forceUpdate" | "hasPopperEscaped" | "isReferenceHidden" | "update" | "placementClassNamePostfix" | "transitionClass"> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/dist/docs/components/CodeBlock copy.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-declare const CodeBlock: FC;
-export default CodeBlock;

package/dist/docs/components/CodeBlock.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-declare const CodeBlock: FC;
-export default CodeBlock;

package/dist/docs/components/Example.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-interface ExampleProps {
-    className: string;
-}
-declare const Example: FC<ExampleProps>;
-export default Example;

package/dist/docs/components/Footer.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-declare const Footer: FC;
-export default Footer;

package/dist/docs/components/Header.d.ts

@@ -1,3 +0,0 @@
-import { FC } from 'react';
-declare const Header: FC;
-export default Header;

package/dist/docs/components/Seo.d.ts

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-declare const SEO: {
-    ({ title, description, image, article }: {
-        title: any;
-        description: any;
-        image: any;
-        article: any;
-    }): JSX.Element;
-    propTypes: {
-        title: PropTypes.Requireable<string>;
-        description: PropTypes.Requireable<string>;
-        image: PropTypes.Requireable<string>;
-        article: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        title: null;
-        description: null;
-        image: null;
-        article: boolean;
-    };
-};
-export default SEO;

package/dist/docs/components/Sidebar.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-interface SidebarProps {
-    currentRoute: string;
-}
-declare const Sidebar: FC<SidebarProps>;
-export default Sidebar;