@eeacms/volto-tabs-block 5.0.1 → 5.0.3

package/CHANGELOG.md

@@ -4,11 +4,54 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-### [5.0.1](https://github.com/eea/volto-tabs-block/compare/5.0.0...5.0.1) - 15 May 2023
+### [5.0.3](https://github.com/eea/volto-tabs-block/compare/5.0.2...5.0.3) - 12 June 2023
+
+#### :house: Internal changes
+
+- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`820aaa9`](https://github.com/eea/volto-tabs-block/commit/820aaa963e978a893a23b77f694bb011f3d768c1)]
+
+#### :hammer_and_wrench: Others
+
+- test: jest should look for addons in node_modules Refs #253277 [valentinab25 - [`e3b0519`](https://github.com/eea/volto-tabs-block/commit/e3b051969a3dac74b5f33340447fe98ffbc0fb14)]
+- test: Fix test config, coverage Refs #253277 [valentinab25 - [`82d25a1`](https://github.com/eea/volto-tabs-block/commit/82d25a1bdc0106a95b39ee55e4b3f34fee89bd9a)]
+### [5.0.2](https://github.com/eea/volto-tabs-block/compare/5.0.1...5.0.2) - 19 May 2023
 
 #### :bug: Bug Fixes
 
-- fix: show properties for block inside tabs block [Mimi - [`5b4dd3d`](https://github.com/eea/volto-tabs-block/commit/5b4dd3d5f3a045126ead6c33cc8e2e470d691c6d)]
+- fix: git lint not ok #252540 [Andrei Grigore - [`8f6aaf9`](https://github.com/eea/volto-tabs-block/commit/8f6aaf9dcda00a60a70fb28012e95cf9dfe201c9)]
+
+#### :hammer_and_wrench: Others
+
+- same name consistency [Andrei Grigore - [`2dd0742`](https://github.com/eea/volto-tabs-block/commit/2dd074241ef0a44c4a9dd8d2aa49dde50ddc6a9c)]
+- lint [Dobricean Ioan Dorian - [`85bb068`](https://github.com/eea/volto-tabs-block/commit/85bb06857cba1897960bdcdb68d8d1e4a9adfe88)]
+- lint [Dobricean Ioan Dorian - [`5d3d44a`](https://github.com/eea/volto-tabs-block/commit/5d3d44a9c6bcf276ae15c9e6f1efbf0a9773cfc2)]
+- lint [Dobricean Ioan Dorian - [`2086359`](https://github.com/eea/volto-tabs-block/commit/2086359d07f1aa95f6cc72fa4ca1e9c5594976e0)]
+- lint [Dobricean Ioan Dorian - [`9cb8474`](https://github.com/eea/volto-tabs-block/commit/9cb8474410b4d6dccf993cee41b15b93f133922a)]
+- final [Dobricean Ioan Dorian - [`6b502c7`](https://github.com/eea/volto-tabs-block/commit/6b502c7ba551f8cbd2d5260892d5e42782c09b4e)]
+- accordion ready [Dobricean Ioan Dorian - [`224f397`](https://github.com/eea/volto-tabs-block/commit/224f397cb63ee0c11042e58f6ee010ac2688c07e)]
+- horizontal responsive edit [Dobricean Ioan Dorian - [`846f618`](https://github.com/eea/volto-tabs-block/commit/846f618fba54989a66498672b333c7695d653844)]
+- horizontal [Dobricean Ioan Dorian - [`877e906`](https://github.com/eea/volto-tabs-block/commit/877e906ebd63cd75fa5be215f6893c06480553e7)]
+- horizontal [Dobricean Ioan Dorian - [`9d8c0dc`](https://github.com/eea/volto-tabs-block/commit/9d8c0dc86e9d22e3300e6afc8f63b620f4e6f5c3)]
+- horizontal [Dobricean Ioan Dorian - [`2ceb2d6`](https://github.com/eea/volto-tabs-block/commit/2ceb2d65f64000714b19e45cbbdcf6dc50e8b3c6)]
+- resize handler [Dobricean Ioan Dorian - [`94d825e`](https://github.com/eea/volto-tabs-block/commit/94d825e433beb34e1556143a8757a1b4f60bdd32)]
+- inverted & icon & style & reverse [Dobricean Ioan Dorian - [`9b703c6`](https://github.com/eea/volto-tabs-block/commit/9b703c6338a9663587718ccfb33ebe5dec02edcb)]
+- inverted & icon & style & reverse [Dobricean Ioan Dorian - [`aa9706b`](https://github.com/eea/volto-tabs-block/commit/aa9706bf5410a05e1a25803fade6b82fd3a36b9d)]
+- edit blocks [Dobricean Ioan Dorian - [`d4b8126`](https://github.com/eea/volto-tabs-block/commit/d4b8126db32401bccab651ddfa4d9fddecfb6feb)]
+- accordion design [Dobricean Ioan Dorian - [`943a842`](https://github.com/eea/volto-tabs-block/commit/943a842e8876d59d0a2b2dd8b560bb1ce95648c9)]
+- remove useeffect [Dobricean Ioan Dorian - [`461d325`](https://github.com/eea/volto-tabs-block/commit/461d3257ca1830f669bfe09df893960ae003f05b)]
+- accordion [Dobricean Ioan Dorian - [`a9c4e85`](https://github.com/eea/volto-tabs-block/commit/a9c4e85c1b4e50802d08acc0546e23afd2cda893)]
+- lint [Dobricean Ioan Dorian - [`f920a0e`](https://github.com/eea/volto-tabs-block/commit/f920a0ec9259b0ecb8c837499ac7553e1df7d1cc)]
+- first [Dobricean Ioan Dorian - [`6c305aa`](https://github.com/eea/volto-tabs-block/commit/6c305aae657c801c6e5e97db5747af56611602f2)]
+- remove data content jj [dobri1408 - [`2464dee`](https://github.com/eea/volto-tabs-block/commit/2464deeac06a0a30eeaf5b56494c7d3f2753bc06)]
+- lint [Dobricean Ioan Dorian - [`44e74f7`](https://github.com/eea/volto-tabs-block/commit/44e74f76c058fd0b571f12574a8ea4eedf96c114)]
+- lint [Dobricean Ioan Dorian - [`8901729`](https://github.com/eea/volto-tabs-block/commit/89017292fe1125de027b1e046a760d30c0ad20da)]
+- lint [Dobricean Ioan Dorian - [`08d2b07`](https://github.com/eea/volto-tabs-block/commit/08d2b076d3d0d50cb9e7ad65af7698250562d1e5)]
+- seo slides and printing styles for carousel [Dobricean Ioan Dorian - [`5ec312b`](https://github.com/eea/volto-tabs-block/commit/5ec312b9d63788b9879e1e5417c53c54a4008ef1)]
+- remove big border [Dobricean Ioan Dorian - [`fff673d`](https://github.com/eea/volto-tabs-block/commit/fff673d3a8b2ebeef72959b863acf221d70aa002)]
+- default & horizontal responsive [Dobricean Ioan Dorian - [`f2b3444`](https://github.com/eea/volto-tabs-block/commit/f2b34442dfc336ab84680cced293486d8fc8af21)]
+- accordion template [Dobricean Ioan Dorian - [`5649125`](https://github.com/eea/volto-tabs-block/commit/5649125263b92850c92b4e6a491ab3663f85a465)]
+- fix select [Dobricean Ioan Dorian - [`7628e86`](https://github.com/eea/volto-tabs-block/commit/7628e86e43b79186960b9b72df567da1affcfaa7)]
+### [5.0.1](https://github.com/eea/volto-tabs-block/compare/5.0.0...5.0.1) - 16 May 2023
 
 ## [5.0.0](https://github.com/eea/volto-tabs-block/compare/4.0.1...5.0.0) - 24 April 2023
 

package/jest-addon.config.js

@@ -5,19 +5,19 @@ module.exports = {
     '!src/**/*.d.ts',
   ],
   moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
     '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
-    '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
+    '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
     '@plone/volto-slate':
       '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,8 +21,8 @@
     "@eeacms/volto-anchors"
   ],
   "dependencies": {
-    "@eeacms/volto-block-style": "*",
     "@eeacms/volto-anchors": "*",
+    "@eeacms/volto-block-style": "*",
     "react-responsive-tabs": "4.4.3",
     "react-slick": "^0.24.0",
     "slick-carousel": "^1.8.1"

package/src/components/Edit.jsx

@@ -16,6 +16,7 @@ import '@eeacms/volto-tabs-block/less/edit.less';
 import '@eeacms/volto-tabs-block/less/tabs.less';
 
 const Edit = (props) => {
+  const view = React.useRef(null);
   const { onChangeBlock, onChangeField } = props;
   const { data = {}, block = null } = props;
   const template = data.template || 'default';
@@ -150,11 +151,11 @@ const Edit = (props) => {
     setActiveBlock(selected);
     setMultiSelected(newMultiSelected);
   };
-
   return (
     <BlockStyleWrapperEdit {...props}>
       <div
-        className={cx('tabs-block edit', theme, verticalAlign)}
+        className={cx('tabs-block edit', theme, verticalAlign, template)}
+        ref={view}
         role="presentation"
         onKeyDown={(e) => {
           handleKeyDown(e, props.index, props.block, props.blockNode.current);
@@ -183,6 +184,7 @@ const Edit = (props) => {
             tabData={tabData}
             tabsData={tabsData}
             tabsList={tabsList}
+            node={view}
             template={template}
             onChangeTabData={onChangeTabData}
             onSelectBlock={onSelectBlock}

package/src/components/schema.js

@@ -39,7 +39,6 @@ export const schema = (config, templateSchema = {}) => {
       },
       template: {
         title: 'Template',
-        type: 'array',
         choices: [...templates],
         default: 'default',
       },

package/src/components/templates/accordion/Edit.jsx

@@ -1,18 +1,382 @@
-import { DefaultEdit } from '../default';
+import React from 'react';
+import cx from 'classnames';
+import { compose } from 'redux';
+import { isEmpty } from 'lodash';
+import { v4 as uuid } from 'uuid';
+import { withRouter } from 'react-router';
+import Tabs from 'react-responsive-tabs';
+import AnimateHeight from 'react-animate-height';
+import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
+import { emptyBlocksForm } from '@plone/volto/helpers';
+import { BlocksForm } from '@plone/volto/components';
+import { Icon } from 'semantic-ui-react';
+import { Menu, Input } from 'semantic-ui-react';
+import { Icon as VoltoIcon } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
+import noop from 'lodash/noop';
+import 'react-responsive-tabs/styles.css';
+import '@eeacms/volto-tabs-block/less/menu.less';
+
+const MenuItem = (props) => {
+  const inputRef = React.useRef(null);
+  const {
+    activeTab = null,
+    activeBlock = null,
+    block = null,
+    data = {},
+    editingTab = null,
+    selected = false,
+    tabData = {},
+    tabs = {},
+
+    tabsData = {},
+    tabsDescription,
+    tabsList = [],
+    tabsTitle,
+    emptyTab = noop,
+    setActiveBlock = noop,
+    setActiveTab = noop,
+    setEditingTab = noop,
+    onChangeBlock = noop,
+  } = props;
+  const { tab, index } = props;
+  const tabIndex = index + 1;
+  const defaultTitle = `Tab ${tabIndex}`;
+  const title = tabs[tab]?.title;
+  const addNewTab = () => {
+    const tabId = uuid();
+
+    onChangeBlock(block, {
+      ...data,
+      data: {
+        ...tabsData,
+        blocks: {
+          ...tabsData.blocks,
+          [tabId]: {
+            ...emptyTab(),
+          },
+        },
+        blocks_layout: {
+          items: [...tabsData.blocks_layout.items, tabId],
+        },
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    if (editingTab === tab && inputRef.current) {
+      inputRef.current.focus();
+    }
+    /* eslint-disable-next-line */
+  }, [editingTab]);
+
+  return (
+    <>
+      {index === 0 && (tabsTitle || tabsDescription) && (
+        <div className="menu-title"></div>
+      )}
+
+      <Menu.Item
+        role="tab"
+        aria-hidden="true"
+        name={defaultTitle}
+        active={tab === activeTab}
+        onClick={() => {
+          if (activeTab !== tab) {
+            setActiveTab(tab);
+          }
+          if (activeBlock) {
+            setActiveBlock(null);
+          }
+          if (editingTab !== tab) {
+            setEditingTab(null);
+          }
+        }}
+        onDoubleClick={() => {
+          setEditingTab(tab);
+        }}
+        className="remove-margin"
+      >
+        {editingTab === tab && selected ? (
+          <Input
+            placeholder={defaultTitle}
+            ref={inputRef}
+            transparent
+            value={title}
+            onChange={(e) => {
+              onChangeBlock(block, {
+                ...data,
+                data: {
+                  ...tabsData,
+                  blocks: {
+                    ...tabsData.blocks,
+                    [tab]: {
+                      ...(tabData || {}),
+                      title: e.target.value,
+                    },
+                  },
+                },
+              });
+            }}
+          />
+        ) : (
+          <>
+            <p className={'menu-item-text'}>{title || defaultTitle}</p>
+          </>
+        )}
+      </Menu.Item>
+      {index === tabsList.length - 1 ? (
+        <>
+          <Menu.Item
+            role="tab"
+            aria-hidden="true"
+            name="addition"
+            onClick={() => {
+              addNewTab();
+              setEditingTab(null);
+            }}
+            className="remove-margin addition-button"
+          >
+            <p className={'menu-item-text'}>+</p>
+          </Menu.Item>
+        </>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+class Tab extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      height: 0,
+    };
+  }
+
+  componentDidMount() {
+    if (this.state.height === 0) {
+      requestAnimationFrame(() => {
+        this.setState({ height: 'auto' });
+      });
+    }
+  }
+
+  render() {
+    return (
+      <AnimateHeight
+        animateOpacity
+        duration={500}
+        height={this.state.height}
+        aria-hidden={false}
+      >
+        {this.props.children}
+      </AnimateHeight>
+    );
+  }
+}
 
 const Edit = (props) => {
+  const {
+    data = {},
+    tabsList = [],
+    tabs = {},
+    activeTabIndex = 0,
+    setActiveTab = noop,
+    editingTab = null,
+    activeBlock = null,
+    activeTab = null,
+    block = null,
+    setEditingTab = noop,
+    multiSelected = [],
+    manage = false,
+    metadata = null,
+    selected = false,
+    onChangeBlock = noop,
+    onChangeTabData = noop,
+    onSelectBlock = noop,
+    emptyTab = noop,
+    tabsData = {},
+  } = props;
+
+  const accordionConfig =
+    config.blocks.blocksConfig[TABS_BLOCK].templates?.['accordion'] || {};
+  const { icons, semanticIcon, transformWidth = 800 } = accordionConfig;
+
+  const tabsContainer = React.useRef();
+  const [mounted, setMounted] = React.useState(false);
+  const [hashTab, setHashTab] = React.useState(false);
+  const [initialWidth, setInitialWidth] = React.useState(transformWidth);
+
+  const schema = React.useMemo(
+    () =>
+      config.blocks.blocksConfig[TABS_BLOCK].templates?.['default']?.schema(
+        config,
+        props,
+      ) || {},
+    [props],
+  );
+
+  const getDataValue = React.useCallback(
+    (key) => {
+      return (
+        (schema.properties[key]?.value || data[key]) ??
+        schema.properties[key]?.defaultValue
+      );
+    },
+    [schema, data],
+  );
+
+  const items = tabsList.map((tab, index) => {
+    const title = tabs[tab]?.title;
+    const defaultTitle = `Tab ${index + 1}`;
+    const active = activeTabIndex === index;
+    const tabsDescription = data.description;
+
+    return {
+      title: (
+        <>
+          {semanticIcon ? (
+            <div className="tabs-icon">
+              <Icon
+                className={active ? semanticIcon.opened : semanticIcon.closed}
+              />
+            </div>
+          ) : (
+            <div className="tabs-icon">
+              <VoltoIcon
+                name={active ? icons.opened : icons.closed}
+                size={icons.size}
+                className="tabs-icon"
+              />
+            </div>
+          )}
+          <MenuItem
+            {...props}
+            key={tab}
+            editingTab={editingTab}
+            index={index}
+            setEditingTab={setEditingTab}
+            tab={tab}
+            tabsTitle={title || defaultTitle}
+            tabsDescription={tabsDescription}
+          />
+        </>
+      ),
+      content: (
+        <Tab {...props} tab={tab} content={tabs[tab]} aria-hidden={false}>
+          <BlocksForm
+            allowedBlocks={data?.allowedBlocks}
+            description={data?.instrunctions?.data}
+            manage={manage}
+            metadata={metadata}
+            pathname={props.pathname}
+            properties={isEmpty(tabs[tab]) ? emptyBlocksForm() : tabs[tab]}
+            selected={selected && activeTab === tab && activeBlock}
+            selectedBlock={
+              selected && activeTab === tab && activeBlock ? activeBlock : null
+            }
+            title={data?.placeholder}
+            onChangeField={onChangeTabData}
+            onChangeFormData={(newFormData) => {
+              onChangeBlock(block, {
+                ...data,
+                data: {
+                  ...tabsData,
+                  blocks: {
+                    ...tabsData.blocks,
+                    [activeTab]: {
+                      ...(newFormData.blocks_layout.items.length > 0
+                        ? newFormData
+                        : emptyTab()),
+                    },
+                  },
+                },
+              });
+            }}
+            onSelectBlock={(id, selected, e) => {
+              const isMultipleSelection = e
+                ? e.shiftKey || e.ctrlKey || e.metaKey
+                : false;
+              onSelectBlock(
+                id,
+                activeBlock === id ? false : isMultipleSelection,
+                e,
+              );
+              setEditingTab(null);
+            }}
+          >
+            {({ draginfo }, editBlock, blockProps) => {
+              return (
+                <EditBlockWrapper
+                  blockProps={blockProps}
+                  draginfo={draginfo}
+                  multiSelected={multiSelected.includes(blockProps.block)}
+                >
+                  {editBlock}
+                </EditBlockWrapper>
+              );
+            }}
+          </BlocksForm>
+        </Tab>
+      ),
+      key: tab,
+      tabClassName: cx('ui button item title', { active }, 'remove-menu'),
+      panelClassName: cx('ui bottom attached segment tab', {
+        active,
+      }),
+    };
+  });
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  React.useEffect(() => {
+    if (!mounted) return;
+    const { blockWidth, tabsTotalWidth } = tabsContainer.current?.state || {};
+    setInitialWidth(
+      tabsTotalWidth < blockWidth ? tabsTotalWidth + 1 : blockWidth + 1,
+    );
+  }, [mounted]);
+
   return (
-    <DefaultEdit
-      {...props}
-      data={{
-        ...props.data,
-        menuPointing: true,
-        menuSecondary: true,
-        menuFluid: false,
-        menuText: false,
+    <Tabs
+      ref={tabsContainer}
+      transformWidth={initialWidth}
+      selectedTabKey={tabsList[activeTabIndex]}
+      unmountOnExit={false}
+      items={items}
+      onChange={(tab) => {
+        const { blockWidth } = tabsContainer.current?.state || {};
+        const tabWithHash = getParentTabFromHash(
+          data,
+          props.location.hash.substring(1),
+        );
+        if (tabWithHash === tabsList[activeTabIndex] && !hashTab)
+          setHashTab(true);
+        else if (tab !== tabsList[activeTabIndex]) {
+          setActiveTab(tab);
+        } else if (blockWidth <= initialWidth) {
+          setActiveTab(null);
+        }
       }}
+      tabsWrapperClass={cx(
+        props?.data?.accordionIconRight ? 'tabs-accordion-icon-right' : '',
+        'ui pointing secondary menu',
+        'tabs-accessibility',
+        data?.theme ? `theme-${data?.theme}` : '',
+        {
+          inverted: getDataValue('menuInverted'),
+        },
+        'ui fluid pointing secondary menu',
+      )}
+      showMore={false}
     />
   );
 };
 
-export default Edit;
+export default compose(withScrollToTarget, withRouter)(Edit);

package/src/components/templates/accordion/View.jsx

@@ -33,14 +33,16 @@ class Tab extends React.Component {
 
   render() {
     return (
-      <AnimateHeight
-        animateOpacity
-        duration={500}
-        height={this.state.height}
-        aria-hidden={false}
-      >
-        <RenderBlocks {...this.props} />
-      </AnimateHeight>
+      <div id={this.props.title} className="tab-name">
+        <AnimateHeight
+          animateOpacity
+          duration={500}
+          height={this.state.height}
+          aria-hidden={false}
+        >
+          <RenderBlocks {...this.props} />
+        </AnimateHeight>
+      </div>
     );
   }
 }
@@ -105,7 +107,13 @@ const View = (props) => {
         </>
       ),
       content: (
-        <Tab {...props} tab={tab} content={tabs[tab]} aria-hidden={false} />
+        <Tab
+          {...props}
+          tab={tab}
+          content={tabs[tab]}
+          aria-hidden={false}
+          title={tabs[tab]?.title || `Tab ${tabsList.indexOf(tab) + 1}`}
+        />
       ),
       key: tab,
       tabClassName: cx('ui button item title', { active }),
@@ -141,7 +149,6 @@ const View = (props) => {
       activeTabDiv.focus();
     }
   }, [activeTabIndex, id]);
-
   return (
     <div
       tabIndex="0"

package/src/components/templates/carousel/HorizontalView.jsx

@@ -111,9 +111,9 @@ const View = (props) => {
     dots: false,
     speed: 500,
     initialSlide: 0,
-    lazyLoad: 'ondemand',
     swipe: true,
     slidesToShow: 1,
+    lazyLoad: false,
     slidesToScroll: 1,
     touchMove: true,
     beforeChange: (oldIndex, index) => {

package/src/components/templates/default/View.jsx

@@ -29,7 +29,6 @@ const MenuItem = (props) => {
   const { tab, index } = props;
   const title = tabs[tab].title;
   const tabIndex = index + 1;
-
   const [tabChanged, setTabChanged] = useState(false);
   const defaultTitle = `Tab ${tabIndex}`;
 
@@ -45,6 +44,7 @@ const MenuItem = (props) => {
       setTabChanged(false);
     }
   }, [tabChanged, tab, blockId]);
+
   return (
     <React.Fragment>
       {index === 0 && (tabsTitle || tabsDescription) && (
@@ -88,7 +88,6 @@ const View = (props) => {
     activeTabIndex = 0,
   } = props;
   const [menuPosition, setMenuPosition] = React.useState({});
-
   React.useEffect(() => {
     if (Object.keys(menuPosition).length === 0) {
       setMenuPosition(getMenuPosition(data));
@@ -134,8 +133,17 @@ const View = (props) => {
       ),
       pane: (
         <Tab.Pane as={isContainer ? Container : undefined}>
-          <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
-            <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
+          <div
+            id={tabs[tab]?.title || `Tab ${tabsList.indexOf(tab) + 1}`}
+            className="tab-name"
+          >
+            <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
+              <RenderBlocks
+                {...props}
+                metadata={metadata}
+                content={tabs[tab]}
+              />
+            </div>
           </div>
         </Tab.Pane>
       ),