@eeacms/volto-tabs-block 5.0.0 → 5.0.2

package/CHANGELOG.md

@@ -4,7 +4,46 @@ 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.0](https://github.com/eea/volto-tabs-block/compare/4.0.1...5.0.0) - 24 April 2023
+### [5.0.2](https://github.com/eea/volto-tabs-block/compare/5.0.1...5.0.2) - 18 May 2023
+
+#### :bug: Bug Fixes
+
+- 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
 
 #### :rocket: New Features
 
@@ -50,6 +89,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`52bc1b0`](https://github.com/eea/volto-tabs-block/commit/52bc1b0fbd4611173b8ca9dc2cf4033b31474420)]
 ## [4.0.0](https://github.com/eea/volto-tabs-block/compare/3.0.1...4.0.0) - 10 March 2023
 
 #### :house: Internal changes
@@ -60,7 +100,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Release 4.0.0 [Alin Voinea - [`8fc4cc9`](https://github.com/eea/volto-tabs-block/commit/8fc4cc9d8dc71e623e6586b95871cb3b98dc385f)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`22d5bdc`](https://github.com/eea/volto-tabs-block/commit/22d5bdc1b3579cc46c73ce855041ca09154eb502)]
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`fde4324`](https://github.com/eea/volto-tabs-block/commit/fde4324f962cde8e8de0d76a44bee4b67d216bf8)]
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9175e47`](https://github.com/eea/volto-tabs-block/commit/9175e470d793edc63b62a99940aed25dd45f3713)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`3348950`](https://github.com/eea/volto-tabs-block/commit/334895036f8e367281abb35a20879c32dfbfc292)]
+- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`39bfb39`](https://github.com/eea/volto-tabs-block/commit/39bfb39fa6e8483e639491ff998293e758ac6384)]
+- yarn 3 [Alin Voinea - [`7e98df5`](https://github.com/eea/volto-tabs-block/commit/7e98df59669d71945be461e86e282b913538b805)]
+- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`079d7a4`](https://github.com/eea/volto-tabs-block/commit/079d7a43480e92fe280a9372399ff2d4d28537ae)]
 ### [3.0.1](https://github.com/eea/volto-tabs-block/compare/3.0.0...3.0.1) - 16 November 2022
 
 #### :hammer_and_wrench: Others
@@ -84,7 +130,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`a00e419`](https://github.com/eea/volto-tabs-block/commit/a00e419aef4c82a25f277f5e25e3d512c7838264)]
 - lint fix [David Ichim - [`c0a898c`](https://github.com/eea/volto-tabs-block/commit/c0a898c54461478baed2ac2f149ae580d4c89aeb)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`3b284e6`](https://github.com/eea/volto-tabs-block/commit/3b284e65e0eafa9b5ad8c92b4cb77628ffcc8103)]
 ### [2.2.0](https://github.com/eea/volto-tabs-block/compare/2.1.0...2.2.0) - 25 August 2022
 
 #### :hammer_and_wrench: Others
@@ -100,6 +148,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 2.1.0 [Alin Voinea - [`3cdfa30`](https://github.com/eea/volto-tabs-block/commit/3cdfa30d4d03d864be8ad63f0648b4717298734a)]
 - Squashed commit of the following: [Alin Voinea - [`ca241f5`](https://github.com/eea/volto-tabs-block/commit/ca241f56a96817679a1948154e2a8cc0e17b96fe)]
+- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`68ea5a6`](https://github.com/eea/volto-tabs-block/commit/68ea5a6b971fc36840cf5716a04f68316b229b2b)]
 ### [2.0.2](https://github.com/eea/volto-tabs-block/compare/2.0.1...2.0.2) - 16 June 2022
 
 ### [2.0.1](https://github.com/eea/volto-tabs-block/compare/2.0.0...2.0.1) - 10 June 2022
@@ -143,6 +192,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Let theme addon to set default values for default template schema [Miu Razvan - [`55f148d`](https://github.com/eea/volto-tabs-block/commit/55f148d1a95417f8a0b55681ce250acde8463c1c)]
 - Render pane as container if tabs-block has full-width class [Miu Razvan - [`bbffb96`](https://github.com/eea/volto-tabs-block/commit/bbffb96b908476ddee447af3ce79bafb1a12f9a8)]
 - Refactor default template [Miu Razvan - [`58eff52`](https://github.com/eea/volto-tabs-block/commit/58eff5281adb08a5f8fe6d21fd43330252012277)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`72a6735`](https://github.com/eea/volto-tabs-block/commit/72a6735cbbc0e7d57b4bb7ea83fea9becc317018)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`e928da1`](https://github.com/eea/volto-tabs-block/commit/e928da1df7e4680bd4be9b5d46406800d721b8c5)]
 ### [1.2.12](https://github.com/eea/volto-tabs-block/compare/1.2.11...1.2.12) - 21 January 2022
 
 ### [1.2.11](https://github.com/eea/volto-tabs-block/compare/1.2.10...1.2.11) - 4 January 2022
@@ -157,11 +208,17 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`cd2e2ac`](https://github.com/eea/volto-tabs-block/commit/cd2e2ac1d127bfc688ecf16e17734603ab727a34)]
 ### [1.2.8](https://github.com/eea/volto-tabs-block/compare/1.2.7...1.2.8) - 10 December 2021
 
 #### :hammer_and_wrench: Others
 
 - Refs #142010 - Optimize Volto-addons gitflow pipelines [valentinab25 - [`d10c0b3`](https://github.com/eea/volto-tabs-block/commit/d10c0b3d35d25c530d19eebde38dfe5da8fda01b)]
+- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`1a7187f`](https://github.com/eea/volto-tabs-block/commit/1a7187f10b2bd9e1307dabf51823f63ccd766864)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`72a7550`](https://github.com/eea/volto-tabs-block/commit/72a755025b38e1d8dd7fe206273a70585e4b9ac8)]
+- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`022b277`](https://github.com/eea/volto-tabs-block/commit/022b2779a5d7fd7217c2d8a559eafab0bd86ce23)]
+- Add Sonarqube tag using sustainability-frontend addons list [EEA Jenkins - [`84c9bea`](https://github.com/eea/volto-tabs-block/commit/84c9bea7a0aba2fe9ef9713e7131de6da6e0bcce)]
+- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`020aa97`](https://github.com/eea/volto-tabs-block/commit/020aa97bc70a643ea3857566c5a1dc3a5200c2be)]
 ### [1.2.7](https://github.com/eea/volto-tabs-block/compare/1.2.6...1.2.7) - 27 August 2021
 
 #### :hammer_and_wrench: Others
@@ -178,6 +235,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Move less import in View instead of Edit [Tiberiu Ichim - [`84aeff0`](https://github.com/eea/volto-tabs-block/commit/84aeff04a980076f54687c546691d37b6e790478)]
 - gitignore tweaks [Tiberiu Ichim - [`f4c993d`](https://github.com/eea/volto-tabs-block/commit/f4c993d004b126f08f16651ab9460546fa9e9cad)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`865906a`](https://github.com/eea/volto-tabs-block/commit/865906a0deb261d44cc23e26bfd2d1dd0e319640)]
+- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`5383861`](https://github.com/eea/volto-tabs-block/commit/538386100adbc868e693c1c2a5ba13461307ffee)]
 - Style update [razvanMiu - [`323aaaf`](https://github.com/eea/volto-tabs-block/commit/323aaafcad01d8fdf0e713a1fc254ae9fe319f43)]
 - Fix 'scroll to' feature on carousel [razvanMiu - [`16c6a08`](https://github.com/eea/volto-tabs-block/commit/16c6a08f6db687542ea38e07a92b265e592f6173)]
 - Better accesibility [razvanMiu - [`3511611`](https://github.com/eea/volto-tabs-block/commit/351161197270a4807f01d85a7055cbaadae72f8e)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "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}
@@ -220,23 +222,19 @@ const Edit = (props) => {
         ) : (
           ''
         )}
-        {!data?.readOnlySettings ? (
+        {!data?.readOnlySettings && !activeBlock ? (
           <SidebarPortal selected={props.selected}>
-            {activeBlock ? (
-              ''
-            ) : (
-              <InlineForm
-                schema={schemaObject}
-                title={schemaObject.title}
-                onChangeField={(id, value) => {
-                  onChangeBlock(block, {
-                    ...data,
-                    [id]: value,
-                  });
-                }}
-                formData={data}
-              />
-            )}
+            <InlineForm
+              schema={schemaObject}
+              title={schemaObject.title}
+              onChangeField={(id, value) => {
+                onChangeBlock(block, {
+                  ...data,
+                  [id]: value,
+                });
+              }}
+              formData={data}
+            />
           </SidebarPortal>
         ) : (
           ''

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) => {