[pull] main from coreui:main

README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.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`

lerna.json

@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.0.0",
+  "version": "5.1.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

packages/coreui-react/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.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`

packages/coreui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.1",
+    "@coreui/coreui": "^5.0.2",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },

packages/coreui-react/src/components/tabs/CTab.tsx

@@ -12,12 +12,12 @@ export interface CTabProps extends HTMLAttributes<HTMLButtonElement> {
   /**
    * Item key.
    */
-  itemKey?: number | string
+  itemKey: number | string
 }
 
 export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
   ({ children, className, itemKey, ...rest }, ref) => {
-    const { _activeItemKey, setActiveKey, id } = useContext(TabsContext)
+    const { _activeItemKey, setActiveItemKey, id } = useContext(TabsContext)
 
     const isActive = () => itemKey === _activeItemKey
 
@@ -31,8 +31,8 @@ export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
           className,
         )}
         id={`${id}${itemKey}-tab`}
-        onClick={() => setActiveKey(itemKey)}
-        onFocus={() => setActiveKey(itemKey)}
+        onClick={() => setActiveItemKey(itemKey)}
+        onFocus={() => setActiveItemKey(itemKey)}
         role="tab"
         tabIndex={isActive() ? 0 : -1}
         type="button"
@@ -50,7 +50,7 @@ export const CTab = forwardRef<HTMLButtonElement, CTabProps>(
 CTab.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 }
 
 CTab.displayName = 'CTab'

packages/coreui-react/src/components/tabs/CTabList.tsx

@@ -22,12 +22,12 @@ export interface CTabListProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
   ({ children, className, layout, variant, ...rest }, ref) => {
-    const tabsRef = useRef<HTMLDivElement | HTMLUListElement | HTMLOListElement>(null)
-    const forkedRef = useForkedRef(ref, tabsRef)
+    const tabListRef = useRef<HTMLDivElement>(null)
+    const forkedRef = useForkedRef(ref, tabListRef)
 
     const handleKeydown = (event: KeyboardEvent<HTMLDivElement>) => {
       if (
-        tabsRef.current !== null &&
+        tabListRef.current !== null &&
         (event.key === 'ArrowDown' ||
           event.key === 'ArrowUp' ||
           event.key === 'ArrowLeft' ||
@@ -39,7 +39,7 @@ export const CTabList = forwardRef<HTMLDivElement, CTabListProps>(
         const target = event.target as HTMLElement
         // eslint-disable-next-line unicorn/prefer-spread
         const items: HTMLElement[] = Array.from(
-          tabsRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
+          tabListRef.current.querySelectorAll('.nav-link:not(.disabled):not(:disabled)'),
         )
 
         let nextActiveElement

packages/coreui-react/src/components/tabs/CTabPanel.tsx

@@ -15,7 +15,7 @@ export interface CTabPanelProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Item key.
    */
-  itemKey?: number | string
+  itemKey: number | string
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -88,7 +88,7 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
 CTabPanel.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   transition: PropTypes.bool,

packages/coreui-react/src/components/tabs/CTabs.tsx

@@ -6,7 +6,7 @@ export interface CTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChan
   /**
    * The active item key.
    */
-  activeItemKey?: number | string
+  activeItemKey: number | string
   /**
    * A string of all className you want applied to the base component.
    */
@@ -19,7 +19,7 @@ export interface CTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChan
 
 export interface TabsContextProps {
   _activeItemKey?: number | string
-  setActiveKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
+  setActiveItemKey: React.Dispatch<React.SetStateAction<number | string | undefined>>
   id?: string
 }
 
@@ -28,14 +28,14 @@ export const TabsContext = createContext({} as TabsContextProps)
 export const CTabs = forwardRef<HTMLDivElement, CTabsProps>(
   ({ children, activeItemKey, className, onChange }, ref) => {
     const id = useId()
-    const [_activeItemKey, setActiveKey] = useState(activeItemKey)
+    const [_activeItemKey, setActiveItemKey] = useState(activeItemKey)
 
     useEffect(() => {
       _activeItemKey && onChange && onChange(_activeItemKey)
     }, [_activeItemKey])
 
     return (
-      <TabsContext.Provider value={{ _activeItemKey, setActiveKey, id }}>
+      <TabsContext.Provider value={{ _activeItemKey, setActiveItemKey, id }}>
         <div className={classNames('tabs', className)} ref={ref}>
           {children}
         </div>
@@ -45,7 +45,7 @@ export const CTabs = forwardRef<HTMLDivElement, CTabsProps>(
 )
 
 CTabs.propTypes = {
-  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  activeItemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   children: PropTypes.node,
   className: PropTypes.string,
   onChange: PropTypes.func,

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-docs",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "private": true,
   "description": "",
   "homepage": "https://coreui.io/react/",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0",
-    "@coreui/coreui": "^5.0.1",
+    "@coreui/coreui": "^5.0.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
     "@coreui/react-chartjs": "^3.0.0",

packages/docs/src/styles/_component-examples.scss

@@ -2,11 +2,25 @@
 // Docs examples
 //
 
-.tab-content .tab-pane {
-  @include border-top-radius(0);
+.docs-code-tabs {
+  padding: 0 ($cd-gutter-x * .5);
+  margin: 0 ($cd-gutter-x * -.5);
 
-  .highlight {
+  @include media-breakpoint-up(md) {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.docs-code-tab-content {
+  .tab-pane > .docs-code-snippet,
+  .tab-pane > .highlight {
+    border-top: 0;
     @include border-top-radius(0);
+
+    .highlight {
+      @include border-top-radius(0);
+    }
   }
 }
 

packages/remark-code-tabs/index.js

@@ -144,6 +144,7 @@ function createTabs(tabNodes, { labels }) {
     children: [
       {
         attributes: [
+          { name: 'className', type: 'mdxJsxAttribute', value: 'docs-code-tabs' },
           {
             name: 'variant',
             type: 'mdxJsxAttribute',
@@ -155,7 +156,9 @@ function createTabs(tabNodes, { labels }) {
         type: 'mdxJsxFlowElement',
       },
       {
-        attributes: [{ name: 'className', type: 'mdxJsxAttribute', value: 'mb-3' }],
+        attributes: [
+          { name: 'className', type: 'mdxJsxAttribute', value: 'docs-code-tab-content mb-3' },
+        ],
         children: tabContentChildren,
         name: 'CTabContent',
         type: 'mdxJsxFlowElement',