react-tab-set 2.0.120 → 2.0.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tab-set",
-  "version": "2.0.120",
+  "version": "2.0.122",
   "description": "A React Tab Set component",
   "main": "./src/index.mjs",
   "type": "module",
@@ -50,8 +50,8 @@
     "core-js": "^3.37.1",
     "cross-env": "^7.0.3",
     "eslint": "8.57.0",
+    "eslint-config-love": "47.0.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",

package/src/tab-set/index.tsx

@@ -1,3 +1,6 @@
+import type {
+  JSX
+} from 'react'
 import React, {
   Children,
   cloneElement,
@@ -12,7 +15,8 @@ import debug from 'debug'
 import isTabPanel from './is-tab-panel.mts'
 import isTabGroup from './is-tab-group.mts'
 
-const error = debug('react-tab-set/tab-set')
+const log = debug('react-tab-set/tab-set')
+const error = debug('react-tab-set/tab-set:error')
 
 export interface TabSetProps {
   children: JSX.Element | JSX.Element[]
@@ -71,23 +75,35 @@ function mapChildren (
   })
 }
 
+function DEFAULT_HANDLE_CHANGE (selectedTab: string): void {
+  log(selectedTab)
+}
+
 export default function TabSet (props: TabSetProps): JSX.Element {
   const {
     children,
-    selectedTab: tab
+    selectedTab: tab = v4()
   } = props
 
   const [selectedTab, setSelectedTab] = useState(tab)
 
-  useEffect(() => { setSelectedTab(tab) }, [tab])
+  useEffect(() => {
+    if (selectedTab !== tab) {
+      setSelectedTab(tab)
+    }
+  }, [tab])
 
   useEffect(() => {
-    const { onChange } = props
+    if (selectedTab !== tab) {
+      const {
+        onChange = DEFAULT_HANDLE_CHANGE
+      } = props
 
-    try {
-      onChange(selectedTab)
-    } catch {
-      error('Error `onChange`')
+      try {
+        onChange(selectedTab)
+      } catch {
+        error('Error `onChange`')
+      }
     }
   }, [selectedTab])
 
@@ -97,7 +113,3 @@ export default function TabSet (props: TabSetProps): JSX.Element {
     </div>
   )
 }
-
-TabSet.defaultProps = {
-  selectedTab: v4()
-}

package/src/tab-set/tab-group/index.tsx

@@ -1,3 +1,6 @@
+import type {
+  JSX
+} from 'react'
 import React, {
   Children,
   cloneElement
@@ -5,9 +8,12 @@ import React, {
 import {
   v4
 } from 'uuid'
+import debug from 'debug'
 
 import isTab from './is-tab.mts'
 
+const log = debug('react-tab-set/tab-set/tab-group')
+
 export interface TabGroupProps {
   children: JSX.Element | JSX.Element[]
   selectedTab: string
@@ -55,11 +61,15 @@ function mapChildren (
   })
 }
 
+function DEFAULT_HANDLE_TAB_SELECT (value: React.SetStateAction<string>): void {
+  log(value)
+}
+
 export default function TabGroup (props: TabGroupProps): JSX.Element {
   const {
     children,
-    selectedTab,
-    onTabSelect
+    selectedTab = v4(),
+    onTabSelect = DEFAULT_HANDLE_TAB_SELECT
   } = props
 
   return (
@@ -68,8 +78,3 @@ export default function TabGroup (props: TabGroupProps): JSX.Element {
     </ul>
   )
 }
-
-TabGroup.defaultProps = {
-  selectedTab: v4(),
-  onTabSelect () { }
-}

package/src/tab-set/tab-group/tab/index.tsx

@@ -1,7 +1,15 @@
-import React from 'react'
+import type {
+  JSX
+} from 'react'
+import React, {
+  useCallback
+} from 'react'
 import {
   v4
 } from 'uuid'
+import debug from 'debug'
+
+const log = debug('react-tab-set/tab-set/tab-group/tab')
 
 export interface TabProps {
   children: JSX.Element | JSX.Element[] | string | number | boolean
@@ -10,30 +18,31 @@ export interface TabProps {
   onTabSelect: (value: React.SetStateAction<string>) => void
 }
 
+function DEFAULT_HANDLE_TAB_SELECT (value: React.SetStateAction<string>): void {
+  log(value)
+}
+
 export default function Tab (props: TabProps): JSX.Element {
   const {
     children,
     tab,
-    selectedTab,
-    onTabSelect
+    selectedTab = v4(),
+    onTabSelect = DEFAULT_HANDLE_TAB_SELECT
   } = props
 
   const className = (tab === selectedTab)
     ? 'tab selected'
     : 'tab'
 
+  const handleClick = useCallback(function onClick (): void {
+    onTabSelect(tab)
+  }, [tab])
+
   return (
     <li
       className={className}
-      onClick={(): void => {
-        onTabSelect(tab)
-      }}>
+      onClick={handleClick}>
       {children}
     </li>
   )
 }
-
-Tab.defaultProps = {
-  selectedTab: v4(),
-  onTabSelect () { }
-}

package/src/tab-set/tab-panel/index.tsx

@@ -1,3 +1,6 @@
+import type {
+  JSX
+} from 'react'
 import React from 'react'
 import {
   v4
@@ -10,15 +13,19 @@ export interface TabPanelProps {
   render?: () => JSX.Element | JSX.Element[] | string | number | boolean | undefined | null
 }
 
+function DEFAULT_RENDER (): null {
+  return null
+}
+
 export default function TabPanel (props: TabPanelProps): JSX.Element | null {
   const {
     tab,
-    selectedTab
+    selectedTab = v4()
   } = props
 
   if (tab === selectedTab) {
     const {
-      render = () => null,
+      render = DEFAULT_RENDER,
       children = render()
     } = props
 
@@ -33,7 +40,3 @@ export default function TabPanel (props: TabPanelProps): JSX.Element | null {
 
   return null
 }
-
-TabPanel.defaultProps = {
-  selectedTab: v4()
-}