react-tab-set 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tab-set",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "A React Tab Set component",
   "main": "./src/index.mjs",
   "type": "module",
@@ -10,6 +10,9 @@
     "url": "http://www.sequencemedia.net"
   },
   "license": "MIT",
+  "engines": {
+    "node": ">=18.17.0"
+  },
   "repository": {
     "type": "git",
     "url": "git://github.com/sequencemedia/react-tab-set.git"
@@ -26,9 +29,9 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.15",
     "@babel/core": "^7.22.20",
     "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/plugin-transform-typescript": "^7.22.15",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
@@ -36,10 +39,6 @@
     "@babel/register": "^7.22.15",
     "@sequencemedia/hooks": "^1.0.454",
     "@storybook/addon-essentials": "^7.4.4",
-    "@storybook/addon-interactions": "^7.4.4",
-    "@storybook/addon-links": "^7.4.4",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.4.4",
     "@storybook/react": "^7.4.4",
     "@storybook/react-webpack5": "^7.4.4",
     "@types/debug": "^4.1.9",
@@ -56,8 +55,8 @@
     "eslint-plugin-storybook": "^0.6.14",
     "husky": "^8.0.3",
     "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "storybook": "^7.4.4",
     "typescript": "^5.2.2"
   },

package/src/.babelrc

@@ -21,6 +21,7 @@
     "@babel/react"
   ],
   "plugins": [
+    "@babel/syntax-jsx",
     "@babel/transform-typescript"
   ]
 }

package/src/index.mts

@@ -1,23 +1 @@
-import isTabGroup from './tab-set/is-tab-group.mts'
-import isTab from './tab-set/tab-group/is-tab.mts'
-import isTabPanel from './tab-set/is-tab-panel.mts'
-
-import TabGroup from './tab-set/tab-group/index.tsx'
-import Tab from './tab-set/tab-group/tab/index.tsx'
-import TabPanel from './tab-set/tab-panel/index.tsx'
-
-import TabSet from './tab-set/index.tsx'
-
-export {
-  isTabGroup,
-  isTab,
-  isTabPanel
-}
-
-export {
-  TabGroup,
-  Tab,
-  TabPanel
-}
-
-export default TabSet
+export { default } from './tab-set/index.tsx'

package/src/tab-set/index.tsx

@@ -10,6 +10,7 @@ import isTabGroup from './is-tab-group.mts'
 const error = debug('react-tab-set/tab-set')
 
 export interface TabSetProps {
+  onClick: (selectedTab: string) => void
   onChange: (selectedTab: string) => void
   selectedTab: string
   children: JSX.Element | JSX.Element[]
@@ -20,16 +21,8 @@ export interface TabSetState {
 }
 
 export default class TabSet extends Component<TabSetProps, TabSetState> {
-  constructor (props: TabSetProps) {
-    super(props)
-
-    const {
-      selectedTab
-    } = props
-
-    this.state = {
-      selectedTab
-    }
+  state = {
+    selectedTab: this.props.selectedTab
   }
 
   /*
@@ -38,11 +31,18 @@ export default class TabSet extends Component<TabSetProps, TabSetState> {
    *  an implemented tab
    */
   static defaultProps = {
-    onChange: () => {},
+    onClick () {},
+    onChange () {},
     selectedTab: v4(),
     children: []
   }
 
+  static getDerivedStateFromProps ({ selectedTab }: TabSetState): TabSetState {
+    return {
+      selectedTab
+    }
+  }
+
   shouldComponentUpdate (props: TabSetProps, state: TabSetState): boolean {
     return (
       props.children !== this.props.children ||
@@ -51,10 +51,18 @@ export default class TabSet extends Component<TabSetProps, TabSetState> {
   }
 
   handleTabSelect = (selectedTab: string): void => {
-    if (selectedTab !== this.state.selectedTab) {
-      const { onChange } = this.props
+    const { onClick } = this.props
 
+    try {
+      onClick(selectedTab)
+    } catch {
+      error('Error `onClick`')
+    }
+
+    if (selectedTab !== this.state.selectedTab) {
       this.setState({ selectedTab }, () => {
+        const { onChange } = this.props
+
         try {
           onChange(selectedTab)
         } catch {

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

@@ -5,7 +5,7 @@ import {
 
 import isTab from './is-tab.mts'
 
-interface TabGroupProps {
+export interface TabGroupProps {
   onTabSelect: (selectedTab: string) => void
   children: JSX.Element | JSX.Element[]
   selectedTab: string
@@ -18,7 +18,7 @@ export default class TabGroup extends Component<TabGroupProps> {
    *  an implemented tab
    */
   static defaultProps = {
-    onTabSelect: () => {},
+    onTabSelect () {},
     selectedTab: v4(),
     children: []
   }

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

@@ -17,7 +17,7 @@ export default class Tab extends Component<TabProps> {
    *  an implemented tab
    */
   static defaultProps = {
-    onTabClick: () => {},
+    onTabClick () {},
     tab: v4(),
     selectedTab: v4(),
     children: []

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

@@ -3,7 +3,7 @@ import {
   v4
 } from 'uuid'
 
-interface TabPanelProps {
+export interface TabPanelProps {
   children: JSX.Element | JSX.Element[] | string | number | boolean | undefined | null
   tab: string
   selectedTab: string

package/index.mjs

@@ -1 +0,0 @@
-export * from './src/index.cjs'