@brillout/docpress 0.16.29 → 0.16.31

package/code-blocks/components/ChoiceGroup.css

@@ -2,7 +2,7 @@
   position: relative;
 
   &:hover {
-    .select-container,
+    .choice-group__selects,
     .copy-button {
       opacity: 1;
     }
@@ -10,17 +10,23 @@
 
   /* layout */
   --top-position: 10px;
-  --right-base: 42px;
-  --right-offset: 0px;
   --border-color: hsl(0, 0%, 75%) hsl(0, 0%, 72%) hsl(0, 0%, 72%) hsl(0, 0%, 75%);
 
-  .select-container {
+  .choice-group__selects {
     position: absolute;
-    background: #eee;
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 2px;
     z-index: 3;
-    font-size: 13.3333px;
     top: var(--top-position);
-    right: calc(var(--right-base) + (var(--right-offset)));
+    right: 42px;
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+  .choice-select {
+    background: #eee;
+    font-size: 13.3333px;
 
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
@@ -30,12 +36,9 @@
     border-radius: 5px;
     border-style: solid;
     border-color: var(--border-color);
-
-    opacity: 0;
-    transition: opacity 0.5s ease-in-out;
   }
 
-  .sliding-rectangle {
+  .choice-select__list {
     position: relative;
     border-radius: 5px;
     border-color: var(--border-color);
@@ -44,7 +47,7 @@
     transition: top 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
   }
 
-  .select-choice {
+  .choice-select__option {
     display: flex;
     white-space: nowrap;
     align-items: center;
@@ -72,21 +75,26 @@
       transition: left 500ms ease, opacity 150ms ease-in-out;
       opacity: 0;
     }
-    .sliding-rectangle:hover &:hover::after {
+
+    .choice-select__list:hover &:hover::after {
       opacity: 1;
     }
+
     &[aria-selected='true'] {
       &::after {
         content: '»' !important;
         opacity: 1;
       }
-      .sliding-rectangle:hover &:not(:hover)::after {
+
+      .choice-select__list:hover &:not(:hover)::after {
         opacity: 0;
       }
+
       &:hover::after {
         left: var(--animation-width);
       }
     }
+
     &[aria-disabled='true'] {
       &::after {
         content: '⊘';
@@ -94,44 +102,46 @@
         left: 1px;
       }
     }
+
     &:not([aria-selected='true']):not([aria-disabled='true']) {
       &::after {
         content: '«';
       }
+
       &:hover::after {
         left: calc(-1 * var(--animation-width));
       }
     }
   }
 
-  .select-container[aria-expanded='false'] {
+  .choice-select[aria-expanded='false'] {
     overflow: hidden;
     border-width: 1px 2px 2px 1px;
   }
 
-  .select-container[aria-expanded='true'] {
+  .choice-select[aria-expanded='true'] {
     overflow: visible;
     border-width: 0;
 
-    .sliding-rectangle {
+    .choice-select__list {
       border-style: solid;
       border-width: 1px 2px 2px 1px;
     }
   }
 
-  .select-choice:last-child {
+  .choice-select__option:last-child {
     border-bottom: none;
   }
 
-  .select-choice:hover {
+  .choice-select__option:hover {
     background: #f5f5f5;
   }
 
-  .select-choice[aria-selected='true'] {
+  .choice-select__option[aria-selected='true'] {
     background: #eee;
   }
 
-  .select-choice[aria-disabled='true'] {
+  .choice-select__option[aria-disabled='true'] {
     color: #999;
     cursor: default;
     opacity: 0.8;

package/code-blocks/components/ChoiceGroup.tsx

@@ -1,6 +1,6 @@
-export { ChoiceGroup }
+export { ChoiceGroup, CustomSelectsContainer }
 
-import React, { useEffect, useRef, useState } from 'react'
+import React, { createContext, useContext, useEffect, useState } from 'react'
 import { useSelectedChoice } from '../hooks/useSelectedChoice.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
 import { cls } from '../../utils/cls.js'
@@ -11,41 +11,136 @@ type TChoiceGroup = {
   choices: string[]
   default: string
   disabled: string[]
+  hidden: boolean
+  lvl: number
 }
 
-function ChoiceGroup({
-  children,
-  choiceGroup,
-  lvl,
-  hide = false,
-}: { children: React.ReactNode; choiceGroup: TChoiceGroup; lvl: string; hide: boolean }) {
-  const level = Number(lvl)
-  const { name: groupName, choices, default: defaultChoice, disabled: disabledChoices } = choiceGroup
+type ParentChoiceGroup = {
+  name: string
+  default: string
+}
+
+type ChoiceGroupWithParent = TChoiceGroup & { parentChoiceGroup?: ParentChoiceGroup & { choices: string[] } }
+
+type ContextType = {
+  choiceGroupAll: ChoiceGroupWithParent[]
+  registerChoiceGroup: (choiceGroup: TChoiceGroup, parentChoiceGroup?: ParentChoiceGroup & { choice: string }) => void
+}
+
+const CustomSelectsContainerContext = createContext<ContextType | undefined>(undefined)
+
+function useCustomSelectsContext() {
+  const ctx = useContext(CustomSelectsContainerContext)
+  if (!ctx) throw new Error('useCustomSelectsContext must be used inside provider')
+  return ctx
+}
+
+function CustomSelectsContainer({ children }: { children: React.ReactNode }) {
+  const [choiceGroupAll, setChoiceGroupAll] = useState<ChoiceGroupWithParent[]>([])
+
+  function registerChoiceGroup(choiceGroup: TChoiceGroup, parentChoiceGroup?: ParentChoiceGroup & { choice: string }) {
+    setChoiceGroupAll((prev) => {
+      const index = prev.findIndex((g) => g.name === choiceGroup.name)
+      const existing = prev[index]
+
+      if (!existing) {
+        return [
+          ...prev,
+          {
+            ...choiceGroup,
+            ...(parentChoiceGroup && {
+              parentChoiceGroup: {
+                ...parentChoiceGroup,
+                choices: [parentChoiceGroup.choice],
+              },
+            }),
+          },
+        ]
+      }
+
+      if (!parentChoiceGroup || !existing.parentChoiceGroup) return prev
+
+      const existingChoices = existing.parentChoiceGroup.choices
+      const mergedChoices = new Set([...existingChoices, parentChoiceGroup.choice])
+      if (mergedChoices.size === existingChoices.length) return prev
+
+      const next = [...prev]
+      next[index] = {
+        ...existing,
+        parentChoiceGroup: {
+          ...existing.parentChoiceGroup,
+          choices: [...mergedChoices],
+        },
+      }
+      return next
+    })
+  }
+
+  return (
+    <CustomSelectsContainerContext.Provider value={{ choiceGroupAll, registerChoiceGroup }}>
+      {children}
+    </CustomSelectsContainerContext.Provider>
+  )
+}
+
+type ChoiceGroupProps = {
+  children: React.ReactNode
+  choiceGroup: TChoiceGroup
+  parentChoiceGroup?: ParentChoiceGroup & { choice: string }
+}
+
+function ChoiceGroup({ children, choiceGroup, parentChoiceGroup }: ChoiceGroupProps) {
+  const { name: groupName, choices, default: defaultChoice, lvl } = choiceGroup
   // TODO/after-PR-merge rename useSelectedChoice useCurrentSelection
-  const [selectedChoice, setSelectedChoice] = useSelectedChoice(groupName, defaultChoice)
-  const prevPositionRef = useRestoreScroll([selectedChoice])
-  const choiceGroupRef = useRef<HTMLDivElement>(null)
-  const [rightOffset, setRightOffset] = useState(0)
+  const [selectedChoice] = useSelectedChoice(groupName, defaultChoice)
+  const { choiceGroupAll, registerChoiceGroup } = useCustomSelectsContext()
 
-  useEffect(() => {
-    if (level === 0 || !choiceGroupRef.current) return
-    const parentCustomSelect = choiceGroupRef.current.closest(`[data-lvl="${level - 1}"]`)!.lastElementChild!
-    const width = parentCustomSelect.getBoundingClientRect().width
+  useEffect(() => registerChoiceGroup(choiceGroup, parentChoiceGroup), [])
 
-    setRightOffset(level * width + 2)
-  }, [])
+  return (
+    <div data-choice-group={groupName} data-lvl={lvl} className="choice-group">
+      {/* Hidden select used to control choice visibility via CSS */}
+      <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
+        {choices.map((choice, i) => (
+          <option key={i} value={choice}>
+            {choice}
+          </option>
+        ))}
+      </select>
+      {children}
+      {lvl === 0 && (
+        <div className={`choice-group__selects`}>
+          {choiceGroupAll
+            .slice()
+            .sort((a, b) => a.lvl - b.lvl)
+            .map((choiceGroup, i) => (
+              <CustomSelect key={i} choiceGroup={choiceGroup} />
+            ))}
+        </div>
+      )}
+    </div>
+  )
+}
 
-  const isDisabled = (choice: string) => disabledChoices.includes(choice)
+function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
+  const {
+    name: groupName,
+    choices,
+    default: defaultChoice,
+    disabled: disabledChoices,
+    hidden,
+    parentChoiceGroup,
+  } = choiceGroup
+  const [selectedChoice, setSelectedChoice] = useSelectedChoice(groupName, defaultChoice)
+  const prevPositionRef = useRestoreScroll([selectedChoice])
+  const [expanded, setExpanded] = useState(false)
   const selectedIndex = choices.indexOf(selectedChoice)
-
   const height = 25
-  const [expanded, setExpanded] = useState(false)
   const rectTop = -selectedIndex * height
 
-  // Cycle to next option
-  const next = () => {
+  const isDisabled = (choice: string) => disabledChoices.includes(choice)
+  function next() {
     let nextIndex = selectedIndex
-
     for (let i = 0; i < choices.length; i++) {
       nextIndex = (nextIndex + 1) % choices.length
       if (!isDisabled(choices[nextIndex]!)) {
@@ -54,62 +149,57 @@ function ChoiceGroup({
       }
     }
   }
+  function isHidden() {
+    if (parentChoiceGroup) {
+      const [parentSelectedChoice] = useSelectedChoice(parentChoiceGroup.name, parentChoiceGroup.default)
+      return !parentChoiceGroup.choices.includes(parentSelectedChoice) || hidden
+    }
+    return hidden
+  }
 
   return (
-    <div ref={choiceGroupRef} data-choice-group={groupName} data-lvl={level} className="choice-group">
-      {/* Hidden select used to control choice visibility via CSS */}
-      <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
-        {choiceGroup.choices.map((choice, i) => (
-          <option key={i} value={choice}>
-            {choice}
-          </option>
-        ))}
-      </select>
-      {children}
+    <div
+      id={`choicesFor-${groupName}`}
+      aria-haspopup="listbox"
+      aria-expanded={expanded}
+      className={cls(['choice-select', (isHidden() || isDisabled(selectedChoice)) && 'hidden'])}
+      style={{ height }}
+      onMouseEnter={() => setExpanded(true)}
+      onMouseLeave={() => setExpanded(false)}
+      onClick={() => {
+        if (!expanded) next()
+      }}
+    >
       <div
-        id={`choicesFor-${groupName}`}
-        aria-haspopup="listbox"
-        aria-expanded={expanded}
-        className={cls(['select-container', (hide || isDisabled(selectedChoice)) && 'hidden'])}
-        style={{ height, '--right-offset': `${rightOffset}px` }}
-        onMouseEnter={() => setExpanded(true)}
-        onMouseLeave={() => setExpanded(false)}
-        onClick={() => {
-          if (!expanded) next()
-        }}
+        aria-activedescendant={`choice-${selectedChoice}`}
+        role="listbox"
+        className="choice-select__list"
+        style={{ top: rectTop, height: choices.length * height }}
       >
-        <div
-          aria-activedescendant={`choice-${selectedChoice}`}
-          role="listbox"
-          className="sliding-rectangle"
-          style={{ top: rectTop, height: choices.length * height }}
-        >
-          {choices.map((choice, i) => (
-            <div
-              id={choice}
-              key={i}
-              aria-selected={i === selectedIndex}
-              aria-disabled={isDisabled(choice)}
-              role="option"
-              className="select-choice"
-              style={{ height }}
-              onClick={handleOnClick}
-            >
-              <span>{choice}</span>
-            </div>
-          ))}
-        </div>
+        {choices.map((choice, i) => (
+          <div
+            id={choice}
+            key={i}
+            aria-selected={i === selectedIndex}
+            aria-disabled={isDisabled(choice)}
+            role="option"
+            className="choice-select__option"
+            style={{ height }}
+            onClick={handleOnClick}
+          >
+            <span>{choice}</span>
+          </div>
+        ))}
       </div>
     </div>
   )
-
   function handleOnClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
     e.stopPropagation()
     const el = e.currentTarget
     prevPositionRef.current = { top: el.getBoundingClientRect().top, el }
-    if (el.ariaSelected === 'true') {
+    if (el.getAttribute('aria-selected') === 'true') {
       next()
-    } else if (el.ariaDisabled === 'false') {
+    } else if (el.getAttribute('aria-disabled') === 'false') {
       setSelectedChoice(el.id)
     }
   }

package/code-blocks/hooks/useMDXComponents.tsx

@@ -3,11 +3,12 @@ export { useMDXComponents }
 import React from 'react'
 import type { UseMdxComponents } from '@mdx-js/mdx'
 import { Pre } from '../components/Pre.js'
-import { ChoiceGroup } from '../components/ChoiceGroup.js'
+import { ChoiceGroup, CustomSelectsContainer } from '../components/ChoiceGroup.js'
 
 const useMDXComponents: UseMdxComponents = () => {
   return {
     ChoiceGroup,
+    CustomSelectsContainer,
     pre: (props) => <Pre {...props} />,
   }
 }

package/code-blocks/remarkChoiceGroup.ts

@@ -101,5 +101,11 @@ declare module 'mdast' {
   export interface Data {
     customDataChoice?: string
     customDataFilter?: string
+    customDataParentChoiceGroup?: {
+      name: string
+      choice: string
+      default: string
+      lvl: number
+    }
   }
 }

package/code-blocks/remarkDetype.ts

@@ -70,8 +70,7 @@ function transformYaml(node: CodeNode) {
     { choiceValue: 'JavaScript', children: [yamlJsCode] },
     { choiceValue: 'TypeScript', children: [codeBlock] },
   ]
-  const replacement = generateChoiceGroupCode(choiceNodes)
-  replacement.attributes.push({ type: 'mdxJsxAttribute', name: 'hide' })
+  const replacement = generateChoiceGroupCode(choiceNodes, parent, true)
   replacement.data ??= { customDataChoice: choice, customDataFilter: 'codeLang' }
 
   parent.children.splice(index, 1, replacement)
@@ -142,12 +141,10 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
     { choiceValue: 'JavaScript', children: [jsCode] },
     { choiceValue: 'TypeScript', children: [tsCode] },
   ]
-  const replacement = generateChoiceGroupCode(choiceNodes)
+  // Add `hide` prop to `<ChoiceGroup>` if the only change was replacing `.ts` with `.js`
+  const hide = codeBlockReplacedJs === codeBlockContentJs
+  const replacement = generateChoiceGroupCode(choiceNodes, parent, hide)
 
-  // Add `hide` attribute (prop) to `<ChoiceGroup>` if the only change was replacing `.ts` with `.js`
-  if (codeBlockReplacedJs === codeBlockContentJs) {
-    replacement.attributes.push({ type: 'mdxJsxAttribute', name: 'hide' })
-  }
   replacement.data ??= { ...data }
 
   parent.children.splice(index, 1, replacement)

package/code-blocks/remarkPkgManager.ts

@@ -47,7 +47,7 @@ function remarkPkgManager() {
       }
 
       const choiceNodes = [...nodes].map(([name, node]) => ({ choiceValue: name, children: [node] }))
-      const replacement = generateChoiceGroupCode(choiceNodes)
+      const replacement = generateChoiceGroupCode(choiceNodes, parent)
 
       replacement.data ??= { customDataChoice: choice, customDataFilter: replacement.type }
       parent.children.splice(index, 1, replacement)

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -24,7 +24,9 @@ const CHOICES_BUILT_IN: Record<string, { choices: string[]; default: string }> =
   },
 }
 
-function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): MdxJsxFlowElement {
+function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide: boolean = false): MdxJsxFlowElement {
+  let lvl: number = parent.type === 'mdxJsxFlowElement' ? 1 : 0
+
   const vikeConfig = getVikeConfig()
   const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue)
   const choiceGroup = findChoiceGroup(vikeConfig, choices)
@@ -41,47 +43,6 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): Md
   const attributes: MdxJsxAttribute[] = []
   const children: MdxJsxFlowElement[] = []
 
-  attributes.push({
-    type: 'mdxJsxAttribute',
-    name: 'choiceGroup',
-    value: {
-      type: 'mdxJsxAttributeValueExpression',
-      value: '',
-      data: {
-        estree: {
-          type: 'Program',
-          sourceType: 'module',
-          comments: [],
-          body: [
-            // @ts-ignore: Missing properties in type definition
-            { type: 'ExpressionStatement', expression: valueToEstree(choiceGroup) },
-          ],
-        },
-      },
-    },
-  })
-
-  if (choiceNodes.length === 1) {
-    attributes.push({ type: 'mdxJsxAttribute', name: 'hide' })
-  }
-
-  let initLvl: number
-
-  switch (parent?.type) {
-    case 'root':
-      initLvl = 0
-      break
-    case 'mdxJsxFlowElement':
-      initLvl = 1
-      break
-
-    default:
-      initLvl = 0
-      break
-  }
-
-  attributes.push({ type: 'mdxJsxAttribute', name: 'lvl', value: `${initLvl}` })
-
   for (const choiceNode of mergedChoiceNodes) {
     const choiceChildren: (BlockContent | DefinitionContent)[] = []
     if (choiceNode.children.every((node) => node.type === 'containerDirective')) {
@@ -89,7 +50,6 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): Md
     } else {
       choiceChildren.push(...choiceNode.children)
     }
-    for (const child of choiceChildren) increaseLvl(child)
 
     children.push({
       type: 'mdxJsxFlowElement',
@@ -99,15 +59,87 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): Md
         { type: 'mdxJsxAttribute', name: 'className', value: 'choice' },
       ],
       children: choiceChildren,
+      data: {
+        customDataParentChoiceGroup: {
+          name: choiceGroup.name,
+          choice: choiceNode.choiceValue,
+          default: choiceGroup.default,
+          lvl,
+        },
+      },
+    })
+  }
+
+  if (parent.data?.customDataParentChoiceGroup) {
+    const { lvl: parentLvl, ...parentChoiceGroup } = parent.data.customDataParentChoiceGroup
+
+    attributes.push({
+      type: 'mdxJsxAttribute',
+      name: 'parentChoiceGroup',
+      value: {
+        type: 'mdxJsxAttributeValueExpression',
+        value: '',
+        data: {
+          estree: {
+            type: 'Program',
+            sourceType: 'module',
+            comments: [],
+            body: [
+              // @ts-ignore: Missing properties in type definition
+              {
+                type: 'ExpressionStatement',
+                expression: valueToEstree(parentChoiceGroup),
+              },
+            ],
+          },
+        },
+      },
     })
+
+    lvl += parentLvl
+    parent.data.customDataParentChoiceGroup = undefined
   }
 
-  return {
+  attributes.push({
+    type: 'mdxJsxAttribute',
+    name: 'choiceGroup',
+    value: {
+      type: 'mdxJsxAttributeValueExpression',
+      value: '',
+      data: {
+        estree: {
+          type: 'Program',
+          sourceType: 'module',
+          comments: [],
+          body: [
+            // @ts-ignore: Missing properties in type definition
+            {
+              type: 'ExpressionStatement',
+              expression: valueToEstree({ ...choiceGroup, hidden: choiceNodes.length === 1 || hide, lvl }),
+            },
+          ],
+        },
+      },
+    },
+  })
+
+  const choiceGroupNode: MdxJsxFlowElement = {
     type: 'mdxJsxFlowElement',
     name: 'ChoiceGroup',
     attributes,
     children,
   }
+
+  if (lvl === 0) {
+    return {
+      type: 'mdxJsxFlowElement',
+      name: 'CustomSelectsContainer',
+      attributes: [],
+      children: [choiceGroupNode],
+    }
+  }
+
+  return choiceGroupNode
 }
 
 function findChoiceGroup(vikeConfig: VikeConfig, choices: string[]) {
@@ -133,13 +165,3 @@ function findChoiceGroup(vikeConfig: VikeConfig, choices: string[]) {
 
   return choiceGroup
 }
-
-function increaseLvl(node: BlockContent | DefinitionContent) {
-  if (node.type === 'mdxJsxFlowElement' && node.name === 'ChoiceGroup') {
-    const attribute = node.attributes.find(
-      (attribute) => attribute.type === 'mdxJsxAttribute' && attribute.name === 'lvl',
-    )
-    const lvlValue = attribute?.value
-    if (lvlValue) attribute.value = `${Number(lvlValue) + 1}`
-  }
-}

package/dist/code-blocks/remarkChoiceGroup.d.ts

@@ -5,5 +5,11 @@ declare module 'mdast' {
     interface Data {
         customDataChoice?: string;
         customDataFilter?: string;
+        customDataParentChoiceGroup?: {
+            name: string;
+            choice: string;
+            default: string;
+            lvl: number;
+        };
     }
 }

package/dist/code-blocks/remarkDetype.js

@@ -55,8 +55,7 @@ function transformYaml(node) {
         { choiceValue: 'JavaScript', children: [yamlJsCode] },
         { choiceValue: 'TypeScript', children: [codeBlock] },
     ];
-    const replacement = generateChoiceGroupCode(choiceNodes);
-    replacement.attributes.push({ type: 'mdxJsxAttribute', name: 'hide' });
+    const replacement = generateChoiceGroupCode(choiceNodes, parent, true);
     replacement.data ?? (replacement.data = { customDataChoice: choice, customDataFilter: 'codeLang' });
     parent.children.splice(index, 1, replacement);
 }
@@ -118,11 +117,9 @@ async function transformTsToJs(node, file) {
         { choiceValue: 'JavaScript', children: [jsCode] },
         { choiceValue: 'TypeScript', children: [tsCode] },
     ];
-    const replacement = generateChoiceGroupCode(choiceNodes);
-    // Add `hide` attribute (prop) to `<ChoiceGroup>` if the only change was replacing `.ts` with `.js`
-    if (codeBlockReplacedJs === codeBlockContentJs) {
-        replacement.attributes.push({ type: 'mdxJsxAttribute', name: 'hide' });
-    }
+    // Add `hide` prop to `<ChoiceGroup>` if the only change was replacing `.ts` with `.js`
+    const hide = codeBlockReplacedJs === codeBlockContentJs;
+    const replacement = generateChoiceGroupCode(choiceNodes, parent, hide);
     replacement.data ?? (replacement.data = { ...data });
     parent.children.splice(index, 1, replacement);
 }

package/dist/code-blocks/remarkPkgManager.js

@@ -36,7 +36,7 @@ function remarkPkgManager() {
                 });
             }
             const choiceNodes = [...nodes].map(([name, node]) => ({ choiceValue: name, children: [node] }));
-            const replacement = generateChoiceGroupCode(choiceNodes);
+            const replacement = generateChoiceGroupCode(choiceNodes, parent);
             replacement.data ?? (replacement.data = { customDataChoice: choice, customDataFilter: replacement.type });
             parent.children.splice(index, 1, replacement);
         });

package/dist/code-blocks/utils/generateChoiceGroupCode.d.ts

@@ -6,4 +6,4 @@ type ChoiceNode = {
     choiceValue: string;
     children: (BlockContent | DefinitionContent)[];
 };
-declare function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): MdxJsxFlowElement;
+declare function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide?: boolean): MdxJsxFlowElement;

package/dist/code-blocks/utils/generateChoiceGroupCode.js

@@ -12,7 +12,8 @@ const CHOICES_BUILT_IN = {
         default: 'npm',
     },
 };
-function generateChoiceGroupCode(choiceNodes, parent) {
+function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
+    let lvl = parent.type === 'mdxJsxFlowElement' ? 1 : 0;
     const vikeConfig = getVikeConfig();
     const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue);
     const choiceGroup = findChoiceGroup(vikeConfig, choices);
@@ -25,41 +26,6 @@ function generateChoiceGroupCode(choiceNodes, parent) {
     });
     const attributes = [];
     const children = [];
-    attributes.push({
-        type: 'mdxJsxAttribute',
-        name: 'choiceGroup',
-        value: {
-            type: 'mdxJsxAttributeValueExpression',
-            value: '',
-            data: {
-                estree: {
-                    type: 'Program',
-                    sourceType: 'module',
-                    comments: [],
-                    body: [
-                        // @ts-ignore: Missing properties in type definition
-                        { type: 'ExpressionStatement', expression: valueToEstree(choiceGroup) },
-                    ],
-                },
-            },
-        },
-    });
-    if (choiceNodes.length === 1) {
-        attributes.push({ type: 'mdxJsxAttribute', name: 'hide' });
-    }
-    let initLvl;
-    switch (parent?.type) {
-        case 'root':
-            initLvl = 0;
-            break;
-        case 'mdxJsxFlowElement':
-            initLvl = 1;
-            break;
-        default:
-            initLvl = 0;
-            break;
-    }
-    attributes.push({ type: 'mdxJsxAttribute', name: 'lvl', value: `${initLvl}` });
     for (const choiceNode of mergedChoiceNodes) {
         const choiceChildren = [];
         if (choiceNode.children.every((node) => node.type === 'containerDirective')) {
@@ -68,8 +34,6 @@ function generateChoiceGroupCode(choiceNodes, parent) {
         else {
             choiceChildren.push(...choiceNode.children);
         }
-        for (const child of choiceChildren)
-            increaseLvl(child);
         children.push({
             type: 'mdxJsxFlowElement',
             name: 'div',
@@ -78,14 +42,80 @@ function generateChoiceGroupCode(choiceNodes, parent) {
                 { type: 'mdxJsxAttribute', name: 'className', value: 'choice' },
             ],
             children: choiceChildren,
+            data: {
+                customDataParentChoiceGroup: {
+                    name: choiceGroup.name,
+                    choice: choiceNode.choiceValue,
+                    default: choiceGroup.default,
+                    lvl,
+                },
+            },
         });
     }
-    return {
+    if (parent.data?.customDataParentChoiceGroup) {
+        const { lvl: parentLvl, ...parentChoiceGroup } = parent.data.customDataParentChoiceGroup;
+        attributes.push({
+            type: 'mdxJsxAttribute',
+            name: 'parentChoiceGroup',
+            value: {
+                type: 'mdxJsxAttributeValueExpression',
+                value: '',
+                data: {
+                    estree: {
+                        type: 'Program',
+                        sourceType: 'module',
+                        comments: [],
+                        body: [
+                            // @ts-ignore: Missing properties in type definition
+                            {
+                                type: 'ExpressionStatement',
+                                expression: valueToEstree(parentChoiceGroup),
+                            },
+                        ],
+                    },
+                },
+            },
+        });
+        lvl += parentLvl;
+        parent.data.customDataParentChoiceGroup = undefined;
+    }
+    attributes.push({
+        type: 'mdxJsxAttribute',
+        name: 'choiceGroup',
+        value: {
+            type: 'mdxJsxAttributeValueExpression',
+            value: '',
+            data: {
+                estree: {
+                    type: 'Program',
+                    sourceType: 'module',
+                    comments: [],
+                    body: [
+                        // @ts-ignore: Missing properties in type definition
+                        {
+                            type: 'ExpressionStatement',
+                            expression: valueToEstree({ ...choiceGroup, hidden: choiceNodes.length === 1 || hide, lvl }),
+                        },
+                    ],
+                },
+            },
+        },
+    });
+    const choiceGroupNode = {
         type: 'mdxJsxFlowElement',
         name: 'ChoiceGroup',
         attributes,
         children,
     };
+    if (lvl === 0) {
+        return {
+            type: 'mdxJsxFlowElement',
+            name: 'CustomSelectsContainer',
+            attributes: [],
+            children: [choiceGroupNode],
+        };
+    }
+    return choiceGroupNode;
 }
 function findChoiceGroup(vikeConfig, choices) {
     const { choices: choicesConfig } = vikeConfig.config.docpress;
@@ -107,11 +137,3 @@ function findChoiceGroup(vikeConfig, choices) {
     };
     return choiceGroup;
 }
-function increaseLvl(node) {
-    if (node.type === 'mdxJsxFlowElement' && node.name === 'ChoiceGroup') {
-        const attribute = node.attributes.find((attribute) => attribute.type === 'mdxJsxAttribute' && attribute.name === 'lvl');
-        const lvlValue = attribute?.value;
-        if (lvlValue)
-            attribute.value = `${Number(lvlValue) + 1}`;
-    }
-}

package/dist/vite.config.js

@@ -31,7 +31,7 @@ const prettyCode = [
     },
 ];
 const rehypePlugins = [prettyCode, [rehypeMetaToProps]];
-const remarkPlugins = [remarkGfm, remarkDirective, remarkDetype, remarkPkgManager, remarkChoiceGroup];
+const remarkPlugins = [remarkGfm, remarkDirective, remarkChoiceGroup, remarkDetype, remarkPkgManager];
 const config = {
     root,
     plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.29",
+  "version": "0.16.31",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -11,7 +11,6 @@
     "@mdx-js/react": "3.0.1",
     "@mdx-js/rollup": "3.0.1",
     "@shikijs/transformers": "^4.0.2",
-    "@vitejs/plugin-react": "^6.0.1",
     "detype": "^2.0.2",
     "estree-util-value-to-estree": "^3.5.0",
     "npm-to-yarn": "^3.0.1",
@@ -22,21 +21,13 @@
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@vitejs/plugin-react": ">=6.0.0",
+    "@vitejs/plugin-react": ">=4.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "typescript": ">=5.0.0",
     "vike": ">=0.4.234",
     "vite": ">=5.2.0"
   },
-  "peerDependenciesMeta": {
-    "@vitejs/plugin-react": {
-      "optional": true
-    },
-    "vite": {
-      "optional": true
-    }
-  },
   "exports": {
     "./renderer/onRenderHtml": "./renderer/onRenderHtml.tsx",
     "./renderer/onRenderClient": "./renderer/onRenderClient.tsx",
@@ -63,6 +54,7 @@
   },
   "devDependencies": {
     "@brillout/release-me": "^0.4.8",
+    "@vitejs/plugin-react": "^6.0.1",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "@types/node": "^24.10.0",

package/vite.config.ts

@@ -34,7 +34,7 @@ const prettyCode = [
   },
 ]
 const rehypePlugins: any = [prettyCode, [rehypeMetaToProps]]
-const remarkPlugins = [remarkGfm, remarkDirective, remarkDetype, remarkPkgManager, remarkChoiceGroup]
+const remarkPlugins = [remarkGfm, remarkDirective, remarkChoiceGroup, remarkDetype, remarkPkgManager]
 
 const config: UserConfig = {
   root,