@brillout/docpress 0.16.36 → 0.16.38

package/code-blocks/components/ChoiceGroup.css

@@ -17,7 +17,6 @@
   .choice-select {
     background: #eee;
     font-size: 13.3333px;
-    z-index: 3;
 
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
@@ -58,7 +57,7 @@
   .choice-select[aria-expanded='true'] {
     overflow: visible;
     border-width: 0;
-    z-index: 5;
+    z-index: 1;
 
     .choice-select__list {
       border-style: solid;

package/code-blocks/components/ChoiceGroup.tsx

@@ -9,8 +9,8 @@ import './ChoiceGroup.css'
 type TChoiceGroup = {
   name: string
   choices: string[]
+  emptyChoices: string[]
   default: string
-  disabled: string[]
   hidden: boolean
   lvl: number
 }
@@ -124,31 +124,20 @@ function ChoiceGroup({ children, choiceGroup, parentChoiceGroup }: ChoiceGroupPr
 }
 
 function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
-  const {
-    name: groupName,
-    choices,
-    default: defaultChoice,
-    disabled: disabledChoices,
-    hidden,
-    parentChoiceGroup,
-  } = choiceGroup
+  const { name: groupName, choices, emptyChoices, default: defaultChoice, hidden, parentChoiceGroup } = choiceGroup
   const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
   const setPrevPosition = useRestoreScroll([selectedChoice])
   const [expanded, setExpanded] = useState(false)
-  const selectedIndex = choices.indexOf(selectedChoice)
+
+  const isEmptyChoice = (choice: string) => emptyChoices.includes(choice)
+  const filteredChoices = choices.filter((choice) => !isEmptyChoice(choice))
+  const selectedIndex = filteredChoices.indexOf(selectedChoice)
   const height = 25
   const rectTop = -selectedIndex * height
 
-  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]!)) {
-        setSelectedChoice(choices[nextIndex]!)
-        return
-      }
-    }
+    const nextIndex = (selectedIndex + 1) % filteredChoices.length
+    setSelectedChoice(filteredChoices[nextIndex]!)
   }
   function isHidden() {
     if (parentChoiceGroup) {
@@ -163,7 +152,7 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
       id={`choicesFor-${groupName}`}
       aria-haspopup="listbox"
       aria-expanded={expanded}
-      className={cls(['choice-select', (isHidden() || isDisabled(selectedChoice)) && 'hidden'])}
+      className={cls(['choice-select', (isHidden() || isEmptyChoice(selectedChoice)) && 'hidden'])}
       style={{ height }}
       onMouseEnter={() => setExpanded(true)}
       onMouseLeave={() => setExpanded(false)}
@@ -175,14 +164,13 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
         aria-activedescendant={`choice-${selectedChoice}`}
         role="listbox"
         className="choice-select__list"
-        style={{ top: rectTop, height: choices.length * height }}
+        style={{ top: rectTop, height: filteredChoices.length * height }}
       >
-        {choices.map((choice, i) => (
+        {filteredChoices.map((choice, i) => (
           <div
             id={choice}
             key={i}
             aria-selected={i === selectedIndex}
-            aria-disabled={isDisabled(choice)}
             role="option"
             className="choice-select__option"
             style={{ height }}
@@ -200,7 +188,7 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
     setPrevPosition(el)
     if (el.getAttribute('aria-selected') === 'true') {
       next()
-    } else if (el.getAttribute('aria-disabled') === 'false') {
+    } else {
       setSelectedChoice(el.id)
     }
   }

package/code-blocks/components/Pre.css

@@ -17,7 +17,6 @@ pre {
     position: absolute !important;
     top: 10px;
     right: 10px;
-    z-index: 3;
     margin: 0;
     height: 25px;
     width: 30px;

package/code-blocks/components/Pre.tsx

@@ -30,8 +30,8 @@ function Pre({ children, ...props }: React.ComponentPropsWithoutRef<'pre'> & Add
       className={cls([className, props['file-added'] && classAdded, props['file-removed'] && classRemoved])}
       {...rest}
     >
-      {!props['hide-menu'] && <CopyButton />}
       {children}
+      {!props['hide-menu'] && <CopyButton />}
     </pre>
   )
 }

package/code-blocks/components/Tabs.tsx

@@ -7,7 +7,7 @@ import { usePageContext } from '../../renderer/usePageContext.js'
 import { assertUsage } from '../../utils/assert.js'
 import './Tabs.css'
 
-function Tabs({ choice }: { choice: string }) {
+function Tabs({ choice, hiddenChoices = [] }: { choice: string; hiddenChoices: string[] }) {
   const groupName = choice
   const pageContext = usePageContext()
   const choicesAll = pageContext.config.docpress.choices
@@ -16,7 +16,9 @@ function Tabs({ choice }: { choice: string }) {
   const { choices, default: defaultChoice } = choicesAll[groupName]
   const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
   const setPrevPosition = useRestoreScroll([selectedChoice])
-  const selectedIndex = choices.indexOf(selectedChoice)
+  const isHidden = (choice: string) => hiddenChoices.includes(choice)
+  const filteredChoices = choices.filter((choice) => !isHidden(choice))
+  const selectedIndex = filteredChoices.indexOf(selectedChoice)
 
   return (
     <div className="choice-tabs" data-choice-group={groupName}>
@@ -33,6 +35,7 @@ function Tabs({ choice }: { choice: string }) {
           <li
             key={i}
             id={choice}
+            style={{ display: isHidden(choice) ? 'none' : undefined }}
             className="choice-tabs__tab"
             role="tab"
             aria-selected={i === selectedIndex}
@@ -59,16 +62,16 @@ function Tabs({ choice }: { choice: string }) {
 
     switch (e.key) {
       case 'ArrowRight':
-        nextIndex = (selectedIndex + 1) % choices.length
+        nextIndex = (selectedIndex + 1) % filteredChoices.length
         break
       case 'ArrowLeft':
-        nextIndex = (selectedIndex - 1 + choices.length) % choices.length
+        nextIndex = (selectedIndex - 1 + filteredChoices.length) % filteredChoices.length
         break
       case 'Home':
         nextIndex = 0
         break
       case 'End':
-        nextIndex = choices.length - 1
+        nextIndex = filteredChoices.length - 1
         break
       default:
         return
@@ -76,7 +79,7 @@ function Tabs({ choice }: { choice: string }) {
 
     e.preventDefault()
     setPrevPosition(el)
-    const nextChoice = choices[nextIndex]!
+    const nextChoice = filteredChoices[nextIndex]!
     setSelectedChoice(nextChoice)
     const tabEl = el.parentElement?.parentElement as HTMLDivElement
 

package/code-blocks/remarkChoiceGroup.ts

@@ -16,7 +16,10 @@ function remarkChoiceGroup() {
         const { choice } = meta.props
         node.meta = meta.rest
 
-        if (choice) node.data ??= { customDataChoice: choice, customDataFilter: `code-${node.lang}` }
+        if (choice) {
+          const filter = ['jsx', 'tsx', 'vue'].includes(node.lang ?? '') ? 'code-component' : `code-${node.lang}`
+          node.data ??= { customDataChoice: choice, customDataFilter: filter }
+        }
       }
       if (node.type === 'containerDirective' && node.name === 'Choice') {
         if (!node.attributes) return

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -108,12 +108,12 @@ function resolveChoiceGroupNodes(choiceNodes: ChoiceNode[]) {
   })
   assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`)
 
-  const disabled = choicesAll[groupName]!.choices.filter((choice) => !choices.includes(choice))
+  const emptyChoices = choicesAll[groupName]!.choices.filter((choice) => !choices.includes(choice))
 
   const choiceGroup = {
     name: groupName,
     ...choicesAll[groupName]!,
-    disabled,
+    emptyChoices,
   }
 
   const mergedChoiceNodes: ChoiceNode[] = choiceGroup.choices.map((choice) => {

package/dist/code-blocks/components/Tabs.d.ts

@@ -1,6 +1,7 @@
 export { Tabs };
 import React from 'react';
 import './Tabs.css';
-declare function Tabs({ choice }: {
+declare function Tabs({ choice, hiddenChoices }: {
     choice: string;
+    hiddenChoices: string[];
 }): React.JSX.Element;

package/dist/code-blocks/components/Tabs.js

@@ -5,7 +5,7 @@ import { useRestoreScroll } from '../hooks/useRestoreScroll.js';
 import { usePageContext } from '../../renderer/usePageContext.js';
 import { assertUsage } from '../../utils/assert.js';
 import './Tabs.css';
-function Tabs({ choice }) {
+function Tabs({ choice, hiddenChoices = [] }) {
     const groupName = choice;
     const pageContext = usePageContext();
     const choicesAll = pageContext.config.docpress.choices;
@@ -13,10 +13,12 @@ function Tabs({ choice }) {
     const { choices, default: defaultChoice } = choicesAll[groupName];
     const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice);
     const setPrevPosition = useRestoreScroll([selectedChoice]);
-    const selectedIndex = choices.indexOf(selectedChoice);
+    const isHidden = (choice) => hiddenChoices.includes(choice);
+    const filteredChoices = choices.filter((choice) => !isHidden(choice));
+    const selectedIndex = filteredChoices.indexOf(selectedChoice);
     return (React.createElement("div", { className: "choice-tabs", "data-choice-group": groupName },
         React.createElement("select", { name: `choicesFor-${groupName}`, value: selectedChoice, hidden: true, disabled: true }, choices.map((choice, i) => (React.createElement("option", { key: i, value: choice }, choice)))),
-        React.createElement("ul", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "tablist" }, choices.map((choice, i) => (React.createElement("li", { key: i, id: choice, className: "choice-tabs__tab", role: "tab", "aria-selected": i === selectedIndex, tabIndex: i === selectedIndex ? 0 : -1, onClick: (e) => handleOnClick(e, i), onKeyDown: handleOnKeyDown }, choice))))));
+        React.createElement("ul", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "tablist" }, choices.map((choice, i) => (React.createElement("li", { key: i, id: choice, style: { display: isHidden(choice) ? 'none' : undefined }, className: "choice-tabs__tab", role: "tab", "aria-selected": i === selectedIndex, tabIndex: i === selectedIndex ? 0 : -1, onClick: (e) => handleOnClick(e, i), onKeyDown: handleOnKeyDown }, choice))))));
     function handleOnClick(e, index) {
         const el = e.currentTarget;
         setPrevPosition(el);
@@ -27,23 +29,23 @@ function Tabs({ choice }) {
         let nextIndex = selectedIndex;
         switch (e.key) {
             case 'ArrowRight':
-                nextIndex = (selectedIndex + 1) % choices.length;
+                nextIndex = (selectedIndex + 1) % filteredChoices.length;
                 break;
             case 'ArrowLeft':
-                nextIndex = (selectedIndex - 1 + choices.length) % choices.length;
+                nextIndex = (selectedIndex - 1 + filteredChoices.length) % filteredChoices.length;
                 break;
             case 'Home':
                 nextIndex = 0;
                 break;
             case 'End':
-                nextIndex = choices.length - 1;
+                nextIndex = filteredChoices.length - 1;
                 break;
             default:
                 return;
         }
         e.preventDefault();
         setPrevPosition(el);
-        const nextChoice = choices[nextIndex];
+        const nextChoice = filteredChoices[nextIndex];
         setSelectedChoice(nextChoice);
         const tabEl = el.parentElement?.parentElement;
         if (!isInViewport(tabEl))

package/dist/code-blocks/remarkChoiceGroup.js

@@ -11,8 +11,10 @@ function remarkChoiceGroup() {
                 const meta = parseMetaString(node.meta, ['choice']);
                 const { choice } = meta.props;
                 node.meta = meta.rest;
-                if (choice)
-                    node.data ?? (node.data = { customDataChoice: choice, customDataFilter: `code-${node.lang}` });
+                if (choice) {
+                    const filter = ['jsx', 'tsx', 'vue'].includes(node.lang ?? '') ? 'code-component' : `code-${node.lang}`;
+                    node.data ?? (node.data = { customDataChoice: choice, customDataFilter: filter });
+                }
             }
             if (node.type === 'containerDirective' && node.name === 'Choice') {
                 if (!node.attributes)

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

@@ -82,11 +82,11 @@ function resolveChoiceGroupNodes(choiceNodes) {
         return true;
     });
     assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`);
-    const disabled = choicesAll[groupName].choices.filter((choice) => !choices.includes(choice));
+    const emptyChoices = choicesAll[groupName].choices.filter((choice) => !choices.includes(choice));
     const choiceGroup = {
         name: groupName,
         ...choicesAll[groupName],
-        disabled,
+        emptyChoices,
     };
     const mergedChoiceNodes = choiceGroup.choices.map((choice) => {
         const node = choiceNodes.find((node) => node.choiceValue === choice);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.36",
+  "version": "0.16.38",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",