Merge branch 'master' into new-title

Author: dev-javascript

CHANGELOG.md

@@ -1,3 +1,10 @@
+# v6.2.1
+
+- Fix tablistStyle issue when when adding MoreButtonPlgin
+- Improve document
+- Fix type issue of `MoreButtonPlugin`
+- Update demo
+
 # v6.2.0
 
 Adding new option `tablistStyle`

README.md

@@ -34,6 +34,7 @@ Create responsive and dynamic tabs in React. This library supports ARIA accessib
 - [Syntax](#syntax)
 - [Minimal Usage Example](#minimal-usage-example)
 - [Simple Manipulation Example](#simple-manipulation-example)
+- [ready function](#ready-function)
 - [Options](#options)
   - [tabs](#tabs)
   - [selectedTabID](#selectedtabid)
@@ -168,7 +169,9 @@ const initialOptions = {
 
 export default () => {
   const [TabList, PanelList, ready] = useDynTabs(initialOptions);
+
   const addTab3 = function () {
+    // use ready function to access the instance object
     ready((instance) => {
       // open tab 3
       instance.open({id: '3', title: 'Tab 3', panelComponent: (props) => <p> panel 3 </p>}).then(() => {
@@ -191,21 +194,34 @@ export default () => {
 };
 ```
 
-**NOTE :**
+## ready function
 
-- Use `ready` function to access the `instance` object
+The `ready` function in the `react-dyn-tabs` library is part of the array returned by the `useDynTabs` hook, alongside the `TabList` and `PanelList` components. This function allows developers to execute a callback when the `TabList` and `PanelList` components are fully mounted, providing access to the instance object for further manipulation.
 
-  ```js
-  ready((instance) => {
-    // manipulate tabs using instance object here
-  });
-  ```
+### Key Features
 
-- `ready` function accepts a `callback` as its parameter and executes it as soon as Tabs get mounted.
+- **Multiple Calls**: Developers can invoke the `ready` function multiple times without any issues.
+- **Stable Identity**: The reference to the `ready` function remains stable across component re-renders, ensuring consistent behavior.
+- **Immediate Execution**: If the `ready` function is called after the tabs have already been mounted, the provided callback will be executed immediately.
 
-- If `ready` function is called after the Tabs has been mounted, the `callback` passed in will be executed immediately.
+### Example Usage
 
-- `ready` function can be executed multiple times and its identity is stable and won’t change on re-renders.
+```js
+const [TabList, PanelList, ready] = useDynTabs(initialOptions);
+
+const addTab3 = function () {
+  ready((instance) => {
+    // open tab 3
+    instance.open({id: '3', title: 'Tab 3', panelComponent: (props) => <p> panel 3 </p>}).then(() => {
+      console.log('tab 3 is open');
+    });
+    // switch to tab 3
+    instance.select('3').then(() => {
+      console.log('tab 3 is selected');
+    });
+  });
+};
+```
 
 ## Options
 
@@ -481,6 +497,14 @@ const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
   useDynTabs({theme:'classic'});
   ```
 
+#### Notes
+
+- If the `theme` option is not provided then all imported themes CSS will be applied to the `Tablist`.
+
+- If the `theme` option is set to a empty string then imported themes CSS will not be applied to the `Tablist`.
+
+- You can create your own theme CSS and set the `theme` option to your theme class name
+
 ### tablistStyle
 
 <table>
@@ -1326,6 +1350,12 @@ useDynamicTabs(
 );
 ```
 
+**unpkg Link**
+
+```js
+<script src="https://unpkg.com/react-dyn-tabs@latest/dist/more-button-plugin.umd.min.js"></script>
+```
+
 ## Render custom components at the end of the Tablist
 
 - render `new tab` button example :

example/stories/change-options/README.md

@@ -199,3 +199,46 @@ function App() {
 }
 <App />;
 ```
+
+### change moreButtonPlugin_iconComponent
+
+```jsx
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+import useDynTabs from 'react-dyn-tabs';
+import MoreButtonPlugin from 'react-dyn-tabs/plugins/moreButtonPlugin';
+
+const initialOptions = {
+  tabs: Array.from({length: 20}).map((value, i) => ({
+    id: `${i + 1}`,
+    title: `tab ${i + 1}`,
+    panelComponent: <p> {`panel ${i + 1}`} </p>,
+  })),
+  selectedTabID: '2',
+  theme: 'card',
+};
+
+function App() {
+  const [TabList, PanelList, ready] = useDynTabs(initialOptions, [MoreButtonPlugin]);
+
+  function handler() {
+    ready((instance) => {
+      instance
+        .setOption('moreButtonPlugin_iconComponent', ({instance}) => {
+          return <span style={{padding: '0.5rem 1rem', textTransform: 'none'}}>More</span>;
+        })
+        .refresh();
+    });
+  }
+
+  return (
+    <div>
+      <button onClick={handler}>customize icon component of more button</button>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+<App />;
+```

example/stories/minimal-usage/README.md

@@ -145,3 +145,39 @@ function App() {
 }
 <App />;
 ```
+
+### blank theme
+
+```jsx
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import useDynTabs from 'react-dyn-tabs';
+
+const initialOptions = {
+  tabs: [
+    {
+      id: '1',
+      title: 'tab 1',
+      panelComponent: (props) => <p> panel 1 </p>,
+    },
+    {
+      id: '2',
+      title: 'tab 2',
+      panelComponent: (props) => <p> panel 2 </p>,
+    },
+  ],
+  selectedTabID: '1',
+  theme: '',
+};
+
+function App() {
+  const [TabList, PanelList] = useDynTabs(initialOptions);
+  return (
+    <div>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+<App />;
+```

index.d.ts

@@ -95,5 +95,5 @@ export interface Instance {
 }
 type Tablist = FC<PropsWithChildren<{}>>;
 type Panellist = FunctionComponent<{}>;
-declare const useDynTabs: (options?: Options) => [Tablist, Panellist, Ready];
+declare const useDynTabs: (options?: Options, plugins?: Array<(instance: any, components: any) => void>) => [Tablist, Panellist, Ready];
 export default useDynTabs;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dyn-tabs",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "private": false,
   "description": "Create responsive and dynamic tabs in React. This library supports ARIA accessibility and provides complete control over tab management using hooks.",
   "keywords": [

package.json

@@ -0,0 +1,6 @@
+/**
+ * @param {any} instance - developer instance of Tabs
+ * @param {any} components - references of all components in the library
+ */
+declare const MoreButtonPlugin: (instance: any, components: any) => void;
+export default MoreButtonPlugin;

plugins/moreButtonPlugin/index.d.ts

@@ -1,5 +1,6 @@
 {
-    "main": "../../lib/cjs/plugins/moreButtonPlugin/index.js",
-    "module": "../../lib/esm/plugins/moreButtonPlugin/index.js",
-    "sideEffects": false
-}
+  "main": "../../lib/cjs/plugins/moreButtonPlugin/index.js",
+  "module": "../../lib/esm/plugins/moreButtonPlugin/index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

plugins/moreButtonPlugin/package.json

@@ -51,9 +51,9 @@ export const setTablistOverflow = (setComponents.setTablistOverflow = function (
 export const setTablistView = (setComponents.setTablistView = function (components) {
   components.TablistView = components.TablistViewFactory.bind(undefined, (ins) => ({
     tablistViewPropsManager: () => {
-      let {className} = components.tablistViewPropsManager(ins);
-      className += ' rc-dyn-tabs-responsive';
-      return {className};
+      const attrs = components.tablistViewPropsManager(ins);
+      attrs.className += ' rc-dyn-tabs-responsive';
+      return attrs;
     },
   }));
 });

src/plugins/moreButtonPlugin/setComponents.js

@@ -1,9 +1,20 @@
 const webpack = require('webpack');
-const {version} = require('./package');
+const {version, name} = require('./package');
 const path = require('path');
 
 module.exports = {
-  title: 'react-dyn-tabs',
+  title: name,
+  template: {
+    head: {
+      meta: [
+        {
+          name: 'description',
+          content:
+            'react-dyn-tabs : create responsive and dynamic tabs, supports ARIA accessibility and provides complete control over tab management using hook.',
+        },
+      ],
+    },
+  },
   getComponentPathLine(componentPath) {
     return ``;
   },