react-tab-set 2.0.121 → 2.0.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tab-set",
-  "version": "2.0.121",
+  "version": "2.0.123",
   "description": "A React Tab Set component",
   "main": "./src/index.mjs",
   "type": "module",
@@ -26,40 +26,40 @@
   },
   "dependencies": {
     "debug": "^4.3.5",
-    "uuid": "^9.0.1"
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.6",
-    "@babel/eslint-parser": "^7.24.6",
-    "@babel/plugin-syntax-jsx": "^7.24.6",
-    "@babel/plugin-transform-typescript": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/plugin-syntax-jsx": "^7.24.7",
+    "@babel/plugin-transform-typescript": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
-    "@sequencemedia/hooks": "^1.0.494",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
+    "@sequencemedia/hooks": "^1.0.495",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-webpack5": "^8.1.11",
     "@types/debug": "^4.1.12",
     "@types/react": "^18.3.3",
-    "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
     "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-plugin-react": "^7.34.2",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "prop-types": "15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.1.5",
-    "typescript": "^5.4.5"
+    "storybook": "^8.1.11",
+    "typescript": "^5.5.2"
   },
   "exports": {
     ".": {

package/src/tab-set/index.tsx

@@ -15,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[]
@@ -74,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])
 
@@ -100,7 +113,3 @@ export default function TabSet (props: TabSetProps): JSX.Element {
     </div>
   )
 }
-
-TabSet.defaultProps = {
-  selectedTab: v4()
-}

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

@@ -8,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
@@ -58,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 (
@@ -71,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

@@ -7,6 +7,9 @@ import 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
@@ -15,12 +18,16 @@ 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)
@@ -39,8 +46,3 @@ export default function Tab (props: TabProps): JSX.Element {
     </li>
   )
 }
-
-Tab.defaultProps = {
-  selectedTab: v4(),
-  onTabSelect () { }
-}

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

@@ -13,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
 
@@ -36,7 +40,3 @@ export default function TabPanel (props: TabPanelProps): JSX.Element | null {
 
   return null
 }
-
-TabPanel.defaultProps = {
-  selectedTab: v4()
-}