@redneckz/wildless-cms-uni-blocks 0.14.87 → 0.14.89

package/mobile/lib/ui-kit/BlockWrapper.js

@@ -14,7 +14,9 @@ export const BlockWrapper = JSX(({ className, version = 'primary', isTheme = tru
     const Tag = tag;
     const [isHidden, setHidden] = useState(false);
     useEffect(() => defaultEventBus.subscribe('tab', (event) => {
-        setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
+        if (!event.groupName || event.groupName === block?.labelGroup) {
+            setHidden(Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)));
+        }
     }), [block]);
     const isGroup = version && isTheme;
     return (_jsx(Tag, { className: style('@container font-sans', isGroup ? 'group' : '', blockStyles[version], isHidden ? 'hidden' : '', padding || defaultPadding, className), ...(isGroup ? { 'data-ver': version } : {}), ...(block?.anchor ? { id: block.anchor } : {}), role: role, children: children }));

package/mobile/lib/ui-kit/BlockWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockWrapper.js","sourceRoot":"","sources":["../../src/ui-kit/BlockWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAOvC,MAAM,CAAC,MAAM,WAAW,GAAiC;IACvD,OAAO,EAAE,4BAA4B;IACrC,SAAS,EAAE,4BAA4B;IACvC,IAAI,EAAE,mCAAmC;IACzC,WAAW,EAAE,kCAAkC;IAC/C,EAAE,EAAE,EAAE;CACP,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EACC,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,IAAI,EACd,cAAc,GAAG,MAAM,EACvB,OAAO,EACP,KAAK,EACL,GAAG,GAAG,SAAS,EACf,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,GAAG,GAAQ,GAAG,CAAC;IAErB,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CACP,GAAG,EAAE,CACH,eAAe,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;QACzC,SAAS,CACP,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CACrF,CAAC;IACJ,CAAC,CAAC,EACJ,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC;IAEnC,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CACd,sBAAsB,EACtB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACtB,WAAW,CAAC,OAAO,CAAC,EACpB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EACxB,OAAO,IAAI,cAAc,EACzB,SAAS,CACV,KACG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACxC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,IAAI,EAAE,IAAI,YAET,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"BlockWrapper.js","sourceRoot":"","sources":["../../src/ui-kit/BlockWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAOvC,MAAM,CAAC,MAAM,WAAW,GAAiC;IACvD,OAAO,EAAE,4BAA4B;IACrC,SAAS,EAAE,4BAA4B;IACvC,IAAI,EAAE,mCAAmC;IACzC,WAAW,EAAE,kCAAkC;IAC/C,EAAE,EAAE,EAAE;CACP,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EACC,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,IAAI,EACd,cAAc,GAAG,MAAM,EACvB,OAAO,EACP,KAAK,EACL,GAAG,GAAG,SAAS,EACf,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,GAAG,GAAQ,GAAG,CAAC;IAErB,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CACP,GAAG,EAAE,CACH,eAAe,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;QACzC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,EAAE,UAAU,EAAE;YAC7D,SAAS,CACP,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CACrF,CAAC;SACH;IACH,CAAC,CAAC,EACJ,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC;IAEnC,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CACd,sBAAsB,EACtB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACtB,WAAW,CAAC,OAAO,CAAC,EACpB,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EACxB,OAAO,IAAI,cAAc,EACzB,SAAS,CACV,KACG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACxC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,IAAI,EAAE,IAAI,YAET,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/src/components/StepsBlock/StepsBlock.tsx

@@ -11,6 +11,7 @@ import { assertUnreachable } from '../../utils/assertUnreachable';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
+import { getIconTextStyle } from './getIconTextStyle';
 import { type DefaultStep, type Step, type StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 
@@ -38,6 +39,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     steps,
     buttons,
     size = 'normal',
+    stepVersion = 'gray',
     version = 'primary',
     ...rest
   }) => (
@@ -57,7 +59,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
       {steps?.length ? (
         <div className="box-border">
           <div className="flex flex-col gap-6xl justify-between">
-            {steps.map(renderStep(size, version))}
+            {steps.map(renderStep(size, stepVersion))}
           </div>
         </div>
       ) : null}
@@ -68,7 +70,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
 
 // TODO: Create universal function for this case
 const renderStep =
-  (size: SizeVersion, version: BlockVersion) =>
+  (size: SizeVersion, stepVersion: BlockVersion) =>
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return
   (step: Step, i: number) => {
@@ -80,7 +82,7 @@ const renderStep =
 
     switch (type) {
       case 'default':
-        return renderDefaultStep(size, version)(step, i);
+        return renderDefaultStep(size, stepVersion)(step, i);
       case 'rte':
         return <RichText __html={step.__html} />;
       default:
@@ -89,12 +91,12 @@ const renderStep =
   };
 
 const renderDefaultStep =
-  (size: SizeVersion, version: BlockVersion) => (step: DefaultStep, i: number) =>
+  (size: SizeVersion, stepVersion: BlockVersion) => (step: DefaultStep, i: number) =>
     (
       <div key={String(i)} className="contents">
         <div className="flex flex-row text-center relative">
           <div className="overflow-hidden flex flex-shrink-0 items-center">
-            {renderIconArea(size, version)(step, i)}
+            {renderIconArea(size, stepVersion)(step, i)}
           </div>
           <div
             className={style(
@@ -117,33 +119,43 @@ const renderDefaultStep =
       </div>
     );
 
-const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const iconSize = size === 'normal' ? '38' : '24';
-  const iconVersion = version === 'secondary' ? 'white' : 'color';
-  const isImg = Boolean(step?.icon?.src);
-  const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
-  const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
+const renderIconArea =
+  (size: SizeVersion, stepVersion: BlockVersion) => (step: Step, i: number) => {
+    const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
+    const isImg = Boolean(step?.icon?.src);
+    const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+    const containerStyle = isImg ? '' : 'rounded-md';
 
-  return (
-    <div
-      className={style(
-        iconAreaSize,
-        containerStyle,
-        'z-10 mr-s flex justify-center content-center',
-      )}
-    >
-      <span className="flex max-w-full max-h-full self-center text-h4 text-secondary-text group-data-secondary:text-white">
-        {isIcon(step?.icon) ? (
-          <Img
-            image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
-            imageClassName="max-w-full max-h-full"
-            width={iconSize}
-            height={iconSize}
-          />
-        ) : (
-          <span>{i + 1}</span>
+    return (
+      <BlockWrapper
+        className={style(
+          iconAreaSize,
+          containerStyle,
+          'z-10 mr-s flex justify-center content-center',
         )}
-      </span>
-    </div>
-  );
-};
+        version={stepVersion}
+      >
+        <span className="flex max-w-full max-h-full items-center justify-center">
+          {isIcon(step?.icon) ? (
+            <Img
+              image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
+              imageClassName="max-w-full max-h-full"
+              width={getIconSizeStyle(size)}
+              height={getIconSizeStyle(size)}
+            />
+          ) : (
+            <span
+              className={style(
+                'text-h4',
+                stepVersion === 'transparent' ? styleMap.iconText : getIconTextStyle(stepVersion),
+              )}
+            >
+              {i + 1}
+            </span>
+          )}
+        </span>
+      </BlockWrapper>
+    );
+  };
+
+const getIconSizeStyle = (size: string) => (size === 'normal' ? '38' : '24');

package/mobile/src/components/StepsBlock/getIconTextStyle.ts

@@ -0,0 +1,4 @@
+import { type BlockVersion } from '../../model/BlockVersion';
+
+export const getIconTextStyle = (version: BlockVersion) =>
+  version === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';

package/mobile/src/components/Tabs/TabActivationEvent.ts

@@ -2,5 +2,6 @@ import { type TabData } from './TabsContent';
 
 export interface TabActivationEvent {
   type?: TabData['type'];
+  groupName?: string;
   label?: string;
 }

package/mobile/src/components/Tabs/Tabs.tsx

@@ -40,7 +40,11 @@ export const Tabs = JSX<TabsBlockProps>(
       const activeTab = tabs[activeTabIndex];
 
       if (activeTab?.type === 'group') {
-        defaultEventBus.subject('tab', { type: activeTab.type, label: activeTab.ref });
+        defaultEventBus.subject('tab', {
+          type: activeTab.type,
+          label: activeTab.ref,
+          groupName: activeTab.name,
+        });
       }
     }, [tabs, activeTabIndex]);
 
@@ -88,7 +92,7 @@ export const Tabs = JSX<TabsBlockProps>(
 
 const fireTabEvent = (tab: TabData) => {
   if (tab.type === 'group') {
-    defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
+    defaultEventBus.fire('tab', { type: tab.type, label: tab.ref, groupName: tab.name });
   }
   if (tab.type === 'link') {
     defaultEventBus.fire('tab', { type: tab.type, label: tab.href });

package/mobile/src/components/Tabs/TabsContent.ts

@@ -8,6 +8,8 @@ import { type LinkProps } from '../../model/LinkProps';
 export type GroupTabData = TitleProps & {
   /** @default group */
   type: 'group';
+  /** @title Имя группы */
+  name?: string;
   /** @title Тег */
   ref?: string;
 };

package/mobile/src/model/ContentPageDef.ts

@@ -10,6 +10,7 @@ export interface BaseBlockDef extends Slot {
   hidden?: boolean;
   anchor?: string;
   labels?: string[]; // TODO: Remove and refactor group tabs
+  labelGroup?: string;
 }
 
 export interface BlockDef extends BaseBlockDef {

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -37,9 +37,11 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     useEffect(
       () =>
         defaultEventBus.subscribe('tab', (event) => {
-          setHidden(
-            Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)),
-          );
+          if (!event.groupName || event.groupName === block?.labelGroup) {
+            setHidden(
+              Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)),
+            );
+          }
         }),
       [block],
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.87",
+  "version": "0.14.89",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/StepsBlock/StepsBlock.fixture.mobile.tsx

@@ -30,6 +30,7 @@ export default {
           description="Откройте мультивалютный вклад, чтобы распределить свои вложения"
           size="normal"
           steps={steps}
+          stepVersion="secondary"
           buttons={[
             {
               text: 'Отправить заявку',
@@ -49,6 +50,7 @@ export default {
           title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
           size="small"
           steps={steps}
+          stepVersion="secondary"
         />
       </div>
     </div>
@@ -123,6 +125,7 @@ export default {
           size="normal"
           steps={steps}
           version="secondary"
+          stepVersion="primary"
         />
       </div>
     </div>
@@ -135,6 +138,7 @@ export default {
           size="small"
           steps={steps}
           version="secondary"
+          stepVersion="primary"
         />
       </div>
     </div>

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -11,6 +11,7 @@ import { assertUnreachable } from '../../utils/assertUnreachable';
 import { isIcon } from '../../utils/isIcon';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
+import { getIconTextStyle } from './getIconTextStyle';
 import { type DefaultStep, type Step, type StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 
@@ -38,6 +39,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     steps,
     buttons,
     size = 'normal',
+    stepVersion = 'gray',
     version = 'primary',
     ...rest
   }) => (
@@ -57,7 +59,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
       {steps?.length ? (
         <div className="box-border">
           <div className="flex flex-col gap-6xl justify-between">
-            {steps.map(renderStep(size, version))}
+            {steps.map(renderStep(size, stepVersion))}
           </div>
         </div>
       ) : null}
@@ -68,7 +70,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
 
 // TODO: Create universal function for this case
 const renderStep =
-  (size: SizeVersion, version: BlockVersion) =>
+  (size: SizeVersion, stepVersion: BlockVersion) =>
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return
   (step: Step, i: number) => {
@@ -80,7 +82,7 @@ const renderStep =
 
     switch (type) {
       case 'default':
-        return renderDefaultStep(size, version)(step, i);
+        return renderDefaultStep(size, stepVersion)(step, i);
       case 'rte':
         return <RichText __html={step.__html} />;
       default:
@@ -89,12 +91,12 @@ const renderStep =
   };
 
 const renderDefaultStep =
-  (size: SizeVersion, version: BlockVersion) => (step: DefaultStep, i: number) =>
+  (size: SizeVersion, stepVersion: BlockVersion) => (step: DefaultStep, i: number) =>
     (
       <div key={String(i)} className="contents">
         <div className="flex flex-row text-center relative">
           <div className="overflow-hidden flex flex-shrink-0 items-center">
-            {renderIconArea(size, version)(step, i)}
+            {renderIconArea(size, stepVersion)(step, i)}
           </div>
           <div
             className={style(
@@ -117,33 +119,43 @@ const renderDefaultStep =
       </div>
     );
 
-const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const iconSize = size === 'normal' ? '38' : '24';
-  const iconVersion = version === 'secondary' ? 'white' : 'color';
-  const isImg = Boolean(step?.icon?.src);
-  const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
-  const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
+const renderIconArea =
+  (size: SizeVersion, stepVersion: BlockVersion) => (step: Step, i: number) => {
+    const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
+    const isImg = Boolean(step?.icon?.src);
+    const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+    const containerStyle = isImg ? '' : 'rounded-md';
 
-  return (
-    <div
-      className={style(
-        iconAreaSize,
-        containerStyle,
-        'z-10 mr-s flex justify-center content-center',
-      )}
-    >
-      <span className="flex max-w-full max-h-full self-center text-h4 text-secondary-text group-data-secondary:text-white">
-        {isIcon(step?.icon) ? (
-          <Img
-            image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
-            imageClassName="max-w-full max-h-full"
-            width={iconSize}
-            height={iconSize}
-          />
-        ) : (
-          <span>{i + 1}</span>
+    return (
+      <BlockWrapper
+        className={style(
+          iconAreaSize,
+          containerStyle,
+          'z-10 mr-s flex justify-center content-center',
         )}
-      </span>
-    </div>
-  );
-};
+        version={stepVersion}
+      >
+        <span className="flex max-w-full max-h-full items-center justify-center">
+          {isIcon(step?.icon) ? (
+            <Img
+              image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
+              imageClassName="max-w-full max-h-full"
+              width={getIconSizeStyle(size)}
+              height={getIconSizeStyle(size)}
+            />
+          ) : (
+            <span
+              className={style(
+                'text-h4',
+                stepVersion === 'transparent' ? styleMap.iconText : getIconTextStyle(stepVersion),
+              )}
+            >
+              {i + 1}
+            </span>
+          )}
+        </span>
+      </BlockWrapper>
+    );
+  };
+
+const getIconSizeStyle = (size: string) => (size === 'normal' ? '38' : '24');

package/src/components/StepsBlock/StepsBlock.tsx

@@ -9,6 +9,7 @@ import { isIcon } from '../../utils/isIcon';
 import { joinList } from '../../utils/joinList';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
+import { getIconTextStyle } from './getIconTextStyle';
 import { renderStep } from './renderStep';
 import { type Step, type StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE, type StyleType } from './StepsBlockStyleMaps';
@@ -112,6 +113,3 @@ const renderStepIcon =
   };
 
 const getIconSizeStyle = (size: string) => (size === 'normal' ? 'h-24 w-24' : 'h-16 w-16');
-
-const getIconTextStyle = (version: BlockVersion) =>
-  version === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';

package/src/components/StepsBlock/getIconTextStyle.ts

@@ -0,0 +1,4 @@
+import { type BlockVersion } from '../../model/BlockVersion';
+
+export const getIconTextStyle = (version: BlockVersion) =>
+  version === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';

package/src/components/Tabs/TabActivationEvent.ts

@@ -2,5 +2,6 @@ import { type TabData } from './TabsContent';
 
 export interface TabActivationEvent {
   type?: TabData['type'];
+  groupName?: string;
   label?: string;
 }

package/src/components/Tabs/Tabs.tsx

@@ -40,7 +40,11 @@ export const Tabs = JSX<TabsBlockProps>(
       const activeTab = tabs[activeTabIndex];
 
       if (activeTab?.type === 'group') {
-        defaultEventBus.subject('tab', { type: activeTab.type, label: activeTab.ref });
+        defaultEventBus.subject('tab', {
+          type: activeTab.type,
+          label: activeTab.ref,
+          groupName: activeTab.name,
+        });
       }
     }, [tabs, activeTabIndex]);
 
@@ -88,7 +92,7 @@ export const Tabs = JSX<TabsBlockProps>(
 
 const fireTabEvent = (tab: TabData) => {
   if (tab.type === 'group') {
-    defaultEventBus.fire('tab', { type: tab.type, label: tab.ref });
+    defaultEventBus.fire('tab', { type: tab.type, label: tab.ref, groupName: tab.name });
   }
   if (tab.type === 'link') {
     defaultEventBus.fire('tab', { type: tab.type, label: tab.href });

package/src/components/Tabs/TabsContent.ts

@@ -8,6 +8,8 @@ import { type LinkProps } from '../../model/LinkProps';
 export type GroupTabData = TitleProps & {
   /** @default group */
   type: 'group';
+  /** @title Имя группы */
+  name?: string;
   /** @title Тег */
   ref?: string;
 };

package/src/model/ContentPageDef.ts

@@ -10,6 +10,7 @@ export interface BaseBlockDef extends Slot {
   hidden?: boolean;
   anchor?: string;
   labels?: string[]; // TODO: Remove and refactor group tabs
+  labelGroup?: string;
 }
 
 export interface BlockDef extends BaseBlockDef {

package/src/ui-kit/BlockWrapper.tsx

@@ -37,9 +37,11 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     useEffect(
       () =>
         defaultEventBus.subscribe('tab', (event) => {
-          setHidden(
-            Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)),
-          );
+          if (!event.groupName || event.groupName === block?.labelGroup) {
+            setHidden(
+              Boolean(event.label && block?.labels?.length && !block.labels.includes(event.label)),
+            );
+          }
         }),
       [block],
     );