1) del tablistID prop from tabs com

2) move createPopper and getPopperMaxHeight files into popper folder
3) del buttonClassName,popperClassName,TabsComponent,popupContainerID and btnAriaProps from button com and add components prop to it

Author: dev-javascript

src/components/index.js

@@ -9,9 +9,8 @@ import TablistOverflow, {tablistOverflowPropsManager} from '../tablistOverflow/t
 import TablistOverflowFactory from '../tablistOverflow/tablistOverflow.factory.js';
 import Tabs, {TabsPropsManager} from '../tabs/tabs.js';
 import TabsFactory from '../tabs/tabs.factory.js';
-import Tab, {tabPropsManager, tabInnerPropsManager, closeIconPropsManager} from '../tab/tab.js';
+import Tab, {tabPropsManager, tabInnerPropsManager, closeIconPropsManager, memomizeTab} from '../tab/tab.js';
 import TabFactory from '../tab/tab.factory.js';
-import memomizeTab from '../tab/memomizeTab.js';
 import {useApi, useRootState, useForceUpdate} from '../hooks.js';
 export default {
   TablistView,
@@ -33,8 +32,8 @@ export default {
   tabPropsManager,
   tabInnerPropsManager,
   closeIconPropsManager,
-  TabFactory,
   memomizeTab,
+  TabFactory,
   PanelList,
   useApi,
   useRootState,

src/plugins/moreButtonPlugin/show-more-tabs/api.js

@@ -1,4 +1,3 @@
-let instanceCounter = 0;
 const Api = function ({getElManagementIns, btnRef, ctx, setHiddenTabIDs}) {
   this.api = ctx;
   this.tablistEl = null;
@@ -8,7 +7,6 @@ const Api = function ({getElManagementIns, btnRef, ctx, setHiddenTabIDs}) {
   this.tabsCount = null;
   this.btnRef = btnRef;
   this._setHiddenTabIDs = setHiddenTabIDs;
-  this._popupContainerID = `rc-dyn-tabs-popupcontainer_${instanceCounter++}`;
 };
 Object.assign(Api.prototype, {
   setEls: function () {
@@ -166,38 +164,19 @@ Object.assign(Api.prototype, {
     const className = tabClass + ' ' + showMoreContainerClass;
     return {className, ref: this.btnRef};
   },
-  btnPropsGenerator: function (hiddenTabIDs, TabsComponent, accessibility) {
+  btnPropsGenerator: function (hiddenTabIDs, components) {
     const userButton = this.api.getOption('showMoreButtonComponent');
-    if (userButton && typeof userButton === 'function') {
+    if (userButton && typeof userButton === 'function')
       return {
         hiddenTabIDs: hiddenTabIDs,
         instance: this.api.userProxy,
       };
-    }
-    const {showMoreButtonClass, showMorePopperClass, titleClass, tablistViewClass, verticalClass, rtlClass} =
-      this.api.optionsManager.setting;
-    const result = {
-      hiddenTabIDs: hiddenTabIDs,
-      popupContainerID: this._popupContainerID, //todo
-      instance: this.api.userProxy,
-      buttonClassName: titleClass + ' ' + showMoreButtonClass,
-      TabsComponent,
-      popperClassName:
-        tablistViewClass +
-        ' ' +
-        verticalClass +
-        ' ' +
-        (this.api.getOption('direction') == 'rtl' ? rtlClass + ' ' : '') +
-        showMorePopperClass,
-      btnAriaProps: {},
-    };
-    if (accessibility) {
-      result.btnAriaProps.tabIndex = 0;
-      result.btnAriaProps.role = 'button';
-      result.btnAriaProps['aria-haspopup'] = 'true';
-      result.btnAriaProps['aria-label'] = 'More tabs'; //todo
-    }
-    return result;
+    else
+      return {
+        hiddenTabIDs: hiddenTabIDs,
+        instance: this.api,
+        components,
+      };
   },
 });
 export default Api;

src/plugins/moreButtonPlugin/show-more-tabs/button/api.js

@@ -0,0 +1,98 @@
+import {forwardRef} from 'react';
+let _counter = 0;
+export default function Api(components) {
+  return new (this.helper.module(
+    function (api) {
+      this._components = components;
+      this._api = api;
+      this._counter = _counter++;
+      this._buttonID = this._getButtonID();
+      this._tablistID = this._getTabListID();
+      this.TabsComponent = this._getTabsComponent();
+    },
+    {
+      _getTabListID: function () {
+        return `rc-dyn-tabs-popupcontainer_${this._counter}`;
+      },
+      _getButtonID: function () {
+        return `rc-dyn-tabs-more-button-${this._counter}`;
+      },
+      btnPropsGenerator: function (onClick, ref, isOpen) {
+        const result = {
+          onClick,
+          ref,
+          className: this._api.getSetting('titleClass') + ' ' + this._api.getSetting('showMoreButtonClass'),
+        };
+        if (this._api.getOption('accessibility')) {
+          result.tabIndex = 0;
+          result.role = 'button';
+          result['aria-haspopup'] = 'true';
+          result['aria-label'] = 'More tabs'; //todo
+          result.id = this._buttonID;
+          result['aria-controls'] = this._tablistID;
+          result['aria-expanded'] = isOpen;
+        }
+        return result;
+      },
+      _getTabsComponent: function () {
+        const buttonID = this._buttonID;
+        const tablistID = this._tablistID;
+        const TabsPropsManager = function (ins, props) {
+          const {dir, isVertical} = props;
+          const result = {
+            className: ins.getSetting('tablistClass') + ' ' + ins.getSetting(`${dir}Class`),
+          };
+          if (isVertical) {
+            result.className += ' ' + ins.getSetting('verticalClass');
+          }
+          if (ins.getOption('accessibility')) {
+            result.role = 'menu';
+            result['aria-labelledby'] = buttonID;
+            result.id = tablistID;
+          }
+          return result;
+        };
+        this._components.Tabs = forwardRef(
+          this._components.TabsFactory.bind(undefined, (ins) => ({
+            Tab: this._getTabComponent(),
+            TabsPropsManager: (props) => TabsPropsManager(ins, props),
+          })),
+        );
+        return components.Tabs;
+      },
+      _getTabComponent: function () {
+        return this._components.memomizeTab(
+          this._components.TabFactory.bind(undefined, (ins) => ({
+            tabPropsManager: (props) => {
+              const originalProps = this._components.tabPropsManager(ins, props);
+              const {
+                'aria-controls': ariaControls,
+                'aria-expanded': ariaExpanded,
+                'aria-selected': ariaSelected,
+                id,
+                ...rest
+              } = originalProps;
+              if (rest.role) {
+                rest.role = 'menuitem';
+              }
+              return rest;
+            },
+            tabInnerPropsManager: (props) => this._components.tabInnerPropsManager(ins, props),
+            closeIconPropsManager: () => this._components.closeIconPropsManager(ins),
+          })),
+        );
+      },
+      getPopperClassName: function () {
+        const {showMorePopperClass, tablistViewClass, verticalClass, rtlClass} = this._api.optionsManager.setting;
+        return (
+          tablistViewClass +
+          ' ' +
+          verticalClass +
+          ' ' +
+          (this._api.getOption('direction') == 'rtl' ? rtlClass + ' ' : '') +
+          showMorePopperClass
+        );
+      },
+    },
+  ))(this);
+}

src/plugins/moreButtonPlugin/show-more-tabs/button/button.js

@@ -1,48 +1,35 @@
 import React, {useState, useCallback, useRef, useEffect, useLayoutEffect} from 'react';
 import PropTypes from 'prop-types';
 export default function Button(getDeps, props) {
-  const {popupContainerID} = props;
-  const {Popper} = getDeps();
+  const {Popper, Api} = getDeps();
   const [open, setOpen] = useState(false);
+  const closePopper = useCallback(() => setOpen(false), []);
   const btnRef = useRef();
   const popperRef = useRef();
   const ref = useRef();
-  ref.current = ref.current || {
-    closePopper: () => setOpen(false),
-  };
+  ref.current = ref.current || Api.call(props.instance, props.components);
   useEffect(() => {
     const close = () => setOpen(false);
     props.instance.on('onSelect', close);
     return () => {
       props.instance && props.instance.off && props.instance.off('onSelect', close);
     };
   }, []);
-  useLayoutEffect(() => {
-    if (btnRef.current && props.instance.getOption('accessibility')) {
-      if (open) {
-        btnRef.current.setAttribute('aria-expanded', true);
-        btnRef.current.setAttribute('aria-controls', popupContainerID);
-      } else {
-        btnRef.current.setAttribute('aria-expanded', false);
-        btnRef.current.removeAttribute('aria-controls');
-      }
-    }
-  }, [open, btnRef.current]);
   const onClick = useCallback(
     (ev) => {
       ev.stopPropagation();
-      window.document.removeEventListener('click', ref.current.closePopper, {once: true});
-      window.document.addEventListener('click', ref.current.closePopper, {once: true});
+      window.document.removeEventListener('click', closePopper, {once: true});
+      window.document.addEventListener('click', closePopper, {once: true});
       setOpen(!open);
       return () => {
-        window.document.removeEventListener('click', ref.current.closePopper, {once: true});
+        window.document.removeEventListener('click', closePopper, {once: true});
       };
     },
     [open],
   );
   return (
     <>
-      <div onClick={onClick} ref={btnRef} className={props.buttonClassName} {...props.btnAriaProps}>
+      <div {...ref.current.btnPropsGenerator(onClick, btnRef, open)}>
         <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" title="More tabs">
           <path
             fill="gray"
@@ -53,21 +40,17 @@ export default function Button(getDeps, props) {
       {open ? (
         <Popper
           {...props}
+          TabsComponent={ref.current.TabsComponent}
           ref={popperRef}
           btnRef={btnRef}
-          className={props.popperClassName}
-          popupContainerID={props.popupContainerID}
+          className={ref.current.getPopperClassName()}
         />
       ) : null}
     </>
   );
 }
 Button.propTypes /* remove-proptypes */ = {
-  buttonClassName: PropTypes.string,
-  popperClassName: PropTypes.string,
   instance: PropTypes.object,
   hiddenTabIDs: PropTypes.string,
-  TabsComponent: PropTypes.func,
-  popupContainerID: PropTypes.string,
-  btnAriaProps: PropTypes.object,
+  components: PropTypes.object,
 };

src/plugins/moreButtonPlugin/show-more-tabs/button/index.js

@@ -1,5 +1,6 @@
 import {memo} from 'react';
 import Popper from './popper';
 import Button from './button';
-const getDeps = () => ({Popper});
+import Api from './api.js';
+const getDeps = () => ({Popper, Api});
 export default memo(Button.bind(null, getDeps));

src/plugins/moreButtonPlugin/show-more-tabs/button/createPopper.js renamed to src/plugins/moreButtonPlugin/show-more-tabs/button/popper/createPopper.js

@@ -1,6 +1,6 @@
 import {forwardRef} from 'react';
-import createPopper from '../createPopper.js';
-import getPopperMaxHeight from '../getPopperMaxHeight.js';
+import createPopper from './createPopper.js';
+import getPopperMaxHeight from './getPopperMaxHeight.js';
 import Popper from './popper.js';
 const clk = (e) => {
   e.nativeEvent.stopImmediatePropagation();

src/plugins/moreButtonPlugin/show-more-tabs/button/getPopperMaxHeight.js renamed to src/plugins/moreButtonPlugin/show-more-tabs/button/popper/getPopperMaxHeight.js

@@ -2,7 +2,7 @@ import React, {useLayoutEffect} from 'react';
 import PropTypes from 'prop-types';
 export default function Popper(getDeps, props, popperRef) {
   const {createPopper, getPopperMaxHeight, clk} = getDeps();
-  const {TabsComponent, instance, hiddenTabIDs, btnRef, className, popupContainerID: tablistID} = props;
+  const {TabsComponent, instance, hiddenTabIDs, btnRef, className} = props;
   useLayoutEffect(() => {
     popperRef.current.style.maxHeight = getPopperMaxHeight(btnRef.current, 15) + 'px';
     const popperIns = createPopper(btnRef.current, popperRef.current);
@@ -20,7 +20,6 @@ export default function Popper(getDeps, props, popperRef) {
           openTabIDs={openedTabIDs}
           dir={instance.getOption('direction')}
           isVertical={true}
-          tablistID={tablistID}
         />
       </div>
     </>
@@ -32,5 +31,4 @@ Popper.propTypes /* remove-proptypes */ = {
   instance: PropTypes.object,
   btnRef: PropTypes.object,
   TabsComponent: PropTypes.func,
-  popupContainerID: PropTypes.string,
 };

src/plugins/moreButtonPlugin/show-more-tabs/button/popper/index.js

@@ -2,7 +2,8 @@ import React, {useState, useRef, useLayoutEffect} from 'react';
 import PropTypes from 'prop-types';
 export default function ShowMoreTabs(getDeps, props) {
   const {
-    components: {Tabs: TabsComponent, useRootState, useForceUpdate},
+    components,
+    components: {useRootState, useForceUpdate},
     ctx,
     ctx: {
       optionsManager: {options},
@@ -35,12 +36,12 @@ export default function ShowMoreTabs(getDeps, props) {
       : Button;
   return (
     <div {...ins.btnContainerPropsGenerator()}>
-      <ButtonComponent {...ins.btnPropsGenerator(hiddenTabIDs, TabsComponent, options.accessibility)} />
+      <ButtonComponent {...ins.btnPropsGenerator(hiddenTabIDs, components)} />
     </div>
   );
 }
 ShowMoreTabs.propTypes /* remove-proptypes */ = {
   ctx: PropTypes.object,
   contexts: PropTypes.object,
-  TabsComponent: PropTypes.func,
+  components: PropTypes.object,
 };