Merge branch 'master' into new-title

Author: dev-javascript

.npmignore

@@ -3,28 +3,22 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
 # production
-webpack*
-rollup*
-.babelrc.js
+/.github
 
 #development
 /build
 /sandbox
 
 #demo
 /example
-index.html
 /demo
 
 # testing
 /coverage
 
 # misc
-.DS_Store
 .env.local
 .env.development.local
 .env.test.local

CHANGELOG.md

@@ -1,3 +1,7 @@
+# v6.2.0
+
+Adding new option `tablistStyle`
+
 # v6.1.1
 
 - Fix `ssr` rendering issue of `element-resize-detector` package

README.md

@@ -43,6 +43,7 @@ Create responsive and dynamic tabs in React. This library supports ARIA accessib
   - [accessibility](#accessibility)
   - [isVertical](#isvertical)
   - [theme](#theme)
+  - [tablistStyle](#tabliststyle)
   - [onLoad](#onload)
   - [onInit](#oninit)
   - [onChange](#onchange)
@@ -480,6 +481,33 @@ const [TabList, PanelList, ready] = useDynTabs({isVertical: true});
   useDynTabs({theme:'classic'});
   ```
 
+### tablistStyle
+
+<table>
+  <tbody>
+    <tr>
+      <th>type</th>
+      <th>default value</th>
+      <th>required</th>
+      <th>description</th>
+    </tr>
+    <tr>
+      <td>object</td>
+      <td>{}</td>
+      <td>no</td>
+      <td>sets the style object for root element of Tablist</td>
+    </tr>
+  </tbody>
+</table>
+
+**Example**
+
+```js
+const [TabList, PanelList, ready] = useDynTabs({
+  tablistStyle: {backgroundColor: 'blue'},
+});
+```
+
 ### onLoad
 
 <table>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dyn-tabs",
-  "version": "6.1.1",
+  "version": "6.2.0",
   "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

@@ -4,6 +4,7 @@ exports[`TabListView structure :  children props 1`] = `
 <div>
   <div
     className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
+    style={{}}
   >
     <div
       className="rc-dyn-tabs-tablist-container"
@@ -16,6 +17,7 @@ exports[`TabListView structure :  default options 1`] = `
 <div>
   <div
     className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
+    style={{}}
   />
 </div>
 `;
@@ -24,6 +26,7 @@ exports[`TabListView structure :  isVertical option 1`] = `
 <div>
   <div
     className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr rc-dyn-tabs-vertical all-themes"
+    style={{}}
   />
 </div>
 `;
@@ -32,6 +35,20 @@ exports[`TabListView structure :  rtl option 1`] = `
 <div>
   <div
     className="rc-dyn-tabs-tablist-view rc-dyn-tabs-rtl all-themes"
+    style={{}}
+  />
+</div>
+`;
+
+exports[`TabListView structure :  style option 1`] = `
+<div>
+  <div
+    className="rc-dyn-tabs-tablist-view rc-dyn-tabs-ltr all-themes"
+    style={
+      {
+        "backgroundColor": "red",
+      }
+    }
   />
 </div>
 `;

src/tablistView/__snapshots__/tablistView.test.js.snap

@@ -8,7 +8,12 @@ export const tablistViewPropsManager = function (ins) {
   if (themeName) {
     className += ' ' + themeName;
   }
-  return {className};
+  const tablistStyle = ins.getOption('tablistStyle') || {};
+  const result = {className};
+  if (typeof tablistStyle === 'object') {
+    result.style = tablistStyle;
+  }
+  return result;
 };
 export default TablistView.bind(undefined, (ins) => ({
   tablistViewPropsManager: () => tablistViewPropsManager(ins),

src/tablistView/tablistView.js

@@ -70,4 +70,15 @@ describe('TabListView structure : ', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+  test('style option', () => {
+    setMockUseContext({tablistStyle: {backgroundColor: 'red'}});
+    const tree = renderer
+      .create(
+        <div>
+          <TablistView></TablistView>
+        </div>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });

src/tablistView/tablistView.test.js

@@ -16,6 +16,7 @@ export default Helper.module(
         tabs: [],
         selectedTabID: '',
         theme: 'all-themes',
+        tablistStyle: {},
         beforeSelect: function () {
           return true;
         },

src/utils/api/optionManager/defaultOptions.js

@@ -6,6 +6,7 @@ describe('DefaultOptions.prototype.getOptions : ', () => {
       tabs: [],
       selectedTabID: '',
       theme: 'all-themes',
+      tablistStyle: {},
       beforeSelect: expect.any(Function),
       beforeClose: expect.any(Function),
       onOpen: expect.any(Function),