v0.2.11

# Bugfixes
- Tab - TabActions 하위 노드가 1개만 있을 때 렌더링 되지 않는 버그 수정 (#143)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",
@@ -86,6 +86,7 @@
     "@types/lodash-es": "^4.17.3",
     "@types/react": "^16.9.34",
     "@types/styled-components": "^5.1.0",
+    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
     "babel-eslint": "^8.2.6",
@@ -125,6 +126,7 @@
     "styled-components": ">=5"
   },
   "dependencies": {
-    "lodash-es": "^4.17.15"
+    "lodash-es": "^4.17.15",
+    "uuid": "^8.3.1"
   }
 }

src/components/TabActions/TabActions.tsx

@@ -1,5 +1,6 @@
 /* External dependencies */
 import React, { Ref, forwardRef, useMemo } from 'react'
+import { v4 as uuid } from 'uuid'
 import _ from 'lodash'
 
 /* Internal dependencies */
@@ -21,18 +22,25 @@ function TabActionsComponent({
   children,
   ...otherProps
 }: TabActionsProps, forwardedRef: Ref<any>) {
-  const Content = useMemo(() => (
-    _.map(children, (child) => {
-      if (React.isValidElement(child)) {
-        // @ts-ignore
-        return React.cloneElement(child, { disabled })
-      }
-      if (_.isFunction(child)) {
-        return child({ disabled })
-      }
-      return undefined
-    })
-  ), [disabled, children])
+  const Content = useMemo(() => {
+    if (_.isArray(children)) {
+      return _.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { key: child.key || uuid(), disabled })
+        }
+        if (_.isFunction(child)) {
+          const functionChild = child as Function
+          return React.cloneElement(functionChild({}), { key: uuid(), disabled })
+        }
+        return undefined
+      }).filter(_.identity)
+    }
+    if (_.isFunction(children)) {
+      const functionChild = children as Function
+      return functionChild({ disabled })
+    }
+    return children
+  }, [disabled, children])
 
   return (
     <Wrapper

src/components/Tabs/Tabs.stories.tsx

@@ -1,6 +1,7 @@
 /* External dependencies */
 import React from 'react'
 import base from 'paths.macro'
+import { v4 as uuid } from 'uuid'
 import _ from 'lodash'
 
 /* Internal dependencies */
@@ -49,7 +50,10 @@ Primary.args = {
 export const WithActions = ({ ...otherProps }) => (
   <Tabs {...otherProps}>
     { _.range(0, 8).map((n) => (
-      <TabItem optionKey={`tab-item-${n}`}>
+      <TabItem
+        key={uuid()}
+        optionKey={`tab-item-${n}`}
+      >
         Tab { n }
       </TabItem>
     )) }

src/components/Tabs/Tabs.tsx

@@ -1,5 +1,6 @@
 /* External dependencies */
 import React, { Ref, forwardRef, useState, useEffect, useMemo, useCallback } from 'react'
+import { v4 as uuid } from 'uuid'
 import _ from 'lodash'
 
 /* Internal dependencies */
@@ -68,12 +69,12 @@ function Tabs({
   ])
 
   const Actions = useMemo(() => (
-    React.Children.map(children, (element) => {
-      if (isTabActions(element)) {
-        return React.cloneElement(element, { disabled })
+    _.map(children, (child) => {
+      if (isTabActions(child)) {
+        return React.cloneElement(child, { key: child.key || uuid(), disabled })
       }
       return null
-    })
+    }).filter(_.identity)
   ), [disabled, children])
 
   return (