@brillout/docpress 0.16.42 → 0.16.44

package/code-blocks/components/ChoiceGroup.css

@@ -1,9 +1,15 @@
-.choice-group {
+.choice-group-container {
   position: relative;
 
   /* layout */
   --top-position: 10px;
-  --border-color: hsl(0, 0%, 75%) hsl(0, 0%, 72%) hsl(0, 0%, 72%) hsl(0, 0%, 75%);
+  --border-radius: 5px;
+  --transition-select-list-duration: 180ms;
+  --transition-select-option-duration: 120ms;
+  --transition-select-list: top var(--transition-select-list-duration) cubic-bezier(0.2, 0.9, 0.2, 1), clip-path
+    var(--transition-select-list-duration) ease-in-out;
+  --transition-select-option: background var(--transition-select-option-duration) ease;
+  --transition-select-icon: filter 500ms ease, opacity 500ms ease;
 
   .choice-group__selects {
     position: absolute;
@@ -14,39 +20,50 @@
     right: 42px;
   }
 
-  .choice-select {
-    background: #eee;
+  .choice-select__list {
+    position: relative;
     font-size: 13.3333px;
+    background: transparent;
+    height: calc(var(--choice-count) * var(--option-height));
+    top: 0;
 
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE/Edge legacy */
     user-select: none; /* Standard */
 
-    border-radius: 5px;
-    border-style: solid;
-    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    width: 100%;
+    transition: var(--transition-select-list);
   }
 
-  .choice-select__list {
-    position: relative;
-    border-radius: 5px;
-    border-color: var(--border-color);
-    width: 100%;
-    overflow: hidden;
-    transition: top 180ms cubic-bezier(0.2, 0.9, 0.2, 1);
+  .choice-select__border {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: var(--option-height);
+
+    border-style: solid;
+    border-width: 1px 2px 2px 1px;
+    border-color: hsl(0, 0%, 75%) hsl(0, 0%, 72%) hsl(0, 0%, 72%) hsl(0, 0%, 75%);
+
+    border-radius: var(--border-radius);
+    pointer-events: none;
+
+    transition: top var(--transition-select-list-duration) ease-in-out, height var(--transition-select-list-duration)
+      ease-in-out;
   }
 
   .choice-select__option {
     display: flex;
+    height: var(--option-height);
     white-space: nowrap;
     align-items: center;
     flex-wrap: nowrap;
     background: #fff;
     padding: 0 6px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     cursor: pointer;
-    transition: background 120ms ease;
+    transition: var(--transition-select-option);
   }
 
   .choice-select__option-content {
@@ -61,54 +78,123 @@
 
     filter: grayscale(100%);
     opacity: 0.8;
-    --transition: 500ms ease;
-    transition: filter var(--transition), opacity var(--transition);
+    transition: var(--transition-select-icon);
   }
 
-  .choice-select:hover .choice-select__option img,
-  .choice-select[aria-expanded='true'] .choice-select__option img {
+  .choice-select__list:hover .choice-select__option img,
+  .choice-select__list[aria-expanded='true'] .choice-select__option img {
     filter: grayscale(0%);
     opacity: 1;
   }
 
-  .choice-select[aria-expanded='false'] {
-    overflow: hidden;
-    border-width: 1px 2px 2px 1px;
-  }
-
-  .choice-select[aria-expanded='true'] {
-    overflow: visible;
-    border-width: 0;
+  .choice-select__list[aria-expanded='true'] {
     z-index: 1;
+    clip-path: inset(0px round var(--border-radius)) !important;
+    .choice-select__border {
+      top: 0 !important;
+      height: calc(var(--choice-count) * var(--option-height));
+    }
+  }
 
-    .choice-select__list {
-      border-style: solid;
-      border-width: 1px 2px 2px 1px;
+  .choice-select__list:not(.hovered) {
+    transition: none;
+    .choice-select__border {
+      transition: none;
+    }
+    .choice-select__option {
+      transition: none;
     }
   }
 
-  .choice-select__option:last-child {
-    border-bottom: none;
+  .choice-select__option:not(:last-child) {
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   }
 
   .choice-select__option:hover {
     background: #f5f5f5;
   }
 
-  .choice-select__option[aria-selected='true'] {
+  .choice-select__option:has(.choice-select__radio:checked) {
     background: #eee;
   }
 
-  .choice-select__option[aria-disabled='true'] {
-    color: #999;
-    cursor: not-allowed;
-    opacity: 0.8;
-  }
-
   .hidden {
     display: none !important;
   }
 
+  .choice-select__list:has(.choice-select__option:nth-of-type(1) .choice-select__radio:checked) {
+    top: 0;
+    clip-path: inset(
+      calc(0 * var(--option-height)) 0 calc((var(--choice-count) - 0 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: 0;
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(2) .choice-select__radio:checked) {
+    top: calc(-1 * var(--option-height));
+    clip-path: inset(
+      calc(1 * var(--option-height)) 0 calc((var(--choice-count) - 1 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: var(--option-height);
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(3) .choice-select__radio:checked) {
+    top: calc(-2 * var(--option-height));
+    clip-path: inset(
+      calc(2 * var(--option-height)) 0 calc((var(--choice-count) - 2 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(2 * var(--option-height));
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(4) .choice-select__radio:checked) {
+    top: calc(-3 * var(--option-height));
+    clip-path: inset(
+      calc(3 * var(--option-height)) 0 calc((var(--choice-count) - 3 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(3 * var(--option-height));
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(5) .choice-select__radio:checked) {
+    top: calc(-4 * var(--option-height));
+    clip-path: inset(
+      calc(4 * var(--option-height)) 0 calc((var(--choice-count) - 4 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(4 * var(--option-height));
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(6) .choice-select__radio:checked) {
+    top: calc(-5 * var(--option-height));
+    clip-path: inset(
+      calc(5 * var(--option-height)) 0 calc((var(--choice-count) - 5 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(5 * var(--option-height));
+    }
+  }
+  .choice-select__list:has(.choice-select__option:nth-of-type(7) .choice-select__radio:checked) {
+    top: calc(-6 * var(--option-height));
+    clip-path: inset(
+      calc(6 * var(--option-height)) 0 calc((var(--choice-count) - 6 - 1) * var(--option-height)) 0 round
+        var(--border-radius)
+    );
+    .choice-select__border {
+      top: calc(6 * var(--option-height));
+    }
+  }
+}
+
+.choice-group {
   /* choice visibility logic */
   select:has(option:nth-of-type(1):not(:checked)) ~ .choice:nth-of-type(1),
   select:has(option:nth-of-type(2):not(:checked)) ~ .choice:nth-of-type(2),

package/code-blocks/components/ChoiceGroup.tsx

@@ -1,37 +1,40 @@
-export { ChoiceGroup, CustomSelectsContainer }
+export { ChoiceGroup, ChoiceGroupContainer }
 
 import type { ChoiceGroup as TChoiceGroup, ChoiceGroupWithParent } from '../types.js'
-import React, { createContext, useContext, useState } from 'react'
+import React, { useId, useState } from 'react'
 import { usePageContext } from '../../renderer/usePageContext.js'
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
 import { cls } from '../../utils/cls.js'
 import './ChoiceGroup.css'
 
-const CustomSelectsContainerContext = createContext<{ choiceGroupAll: ChoiceGroupWithParent[] } | undefined>(undefined)
-
-function useCustomSelectsContext() {
-  const ctx = useContext(CustomSelectsContainerContext)
-  if (!ctx) throw new Error('useCustomSelectsContext must be used inside provider')
-  return ctx
-}
-
-function CustomSelectsContainer({
+function ChoiceGroupContainer({
   children,
   choiceGroupAll,
 }: { children: React.ReactNode; choiceGroupAll: ChoiceGroupWithParent[] }) {
-  return <CustomSelectsContainerContext value={{ choiceGroupAll }}>{children}</CustomSelectsContainerContext>
+  const renderCustomSelect = (choiceGroupAll ?? []).some((choiceGroup) => choiceGroup.lvl === 0 && !choiceGroup.hidden)
+  return (
+    <div className="choice-group-container">
+      {children}
+      {renderCustomSelect && (
+        <div className={`choice-group__selects`}>
+          {(choiceGroupAll ?? []).map((choiceGroup) => (
+            <CustomSelect key={choiceGroup.name} choiceGroup={choiceGroup} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
 }
 
 function ChoiceGroup({ children, choiceGroup }: { children: React.ReactNode; choiceGroup: TChoiceGroup }) {
-  const { name: groupName, choices, default: defaultChoice, lvl } = choiceGroup
+  const { name: groupName, choices, default: defaultChoice } = choiceGroup
   const [selectedChoice] = useCurrentSelection(groupName, defaultChoice)
-  const { choiceGroupAll } = useCustomSelectsContext()
 
   return (
-    <div data-choice-group={groupName} data-lvl={lvl} className="choice-group">
+    <div className="choice-group">
       {/* Hidden select used to control choice visibility via CSS */}
-      <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
+      <select data-choice-group={groupName} name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
         {choices.map(({ name: choice }) => (
           <option key={choice} value={choice}>
             {choice}
@@ -39,69 +42,73 @@ function ChoiceGroup({ children, choiceGroup }: { children: React.ReactNode; cho
         ))}
       </select>
       {children}
-      {lvl === 0 && !choiceGroup.hidden && (
-        <div className={`choice-group__selects`}>
-          {(choiceGroupAll ?? []).map((choiceGroup) => (
-            <CustomSelect key={choiceGroup.name} choiceGroup={choiceGroup} />
-          ))}
-        </div>
-      )}
     </div>
   )
 }
 
 const OPTION_HEIGHT = 25
 function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
-  const choicesAll = usePageContext().config.docpress.choices
+  const radioId = useId()
+  const choicesAll = usePageContext().resolved.choices
   const { name: groupName, emptyChoices, default: defaultChoice, hidden, parentChoiceGroup, isBuiltIn } = choiceGroup
   const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
   const [expanded, setExpanded] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
   const [parentSelectedChoice] = useCurrentSelection(parentChoiceGroup?.name || '', parentChoiceGroup?.default || '')
   const setPrevPosition = useRestoreScroll([selectedChoice])
 
-  const { choices } = isBuiltIn ? choiceGroup : choicesAll![groupName]!
+  const choices = (isBuiltIn ? choiceGroup : choicesAll![groupName]!).choices
   const isHidden = parentChoiceGroup ? !parentChoiceGroup.choices.includes(parentSelectedChoice) : hidden
   const isEmptyChoice = (choice: string) => emptyChoices.includes(choice)
   const filteredChoices = choices.filter((choice) => !isEmptyChoice(choice.name))
   const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice)
-  const rectTop = -selectedIndex * OPTION_HEIGHT
 
   return (
     <div
       id={`choicesFor-${groupName}`}
-      aria-haspopup="listbox"
       aria-expanded={expanded}
-      className={cls(['choice-select', (isHidden || isEmptyChoice(selectedChoice)) && 'hidden'])}
-      style={{ height: OPTION_HEIGHT }}
-      onMouseEnter={() => setExpanded(true)}
+      role="radiogroup"
+      className={cls([
+        'choice-select__list',
+        (isHidden || isEmptyChoice(selectedChoice)) && 'hidden',
+        isHovered && 'hovered',
+      ])}
+      style={{ '--option-height': `${OPTION_HEIGHT}px`, '--choice-count': filteredChoices.length }}
+      onMouseEnter={() => {
+        setExpanded(true)
+        setIsHovered(true)
+      }}
       onMouseLeave={() => setExpanded(false)}
+      onTransitionEnd={() => {
+        if (!expanded) setIsHovered(false)
+      }}
       onClick={() => {
         if (!expanded) next()
       }}
+      data-choice-group={groupName}
     >
-      <div
-        aria-activedescendant={`choice-${selectedChoice}`}
-        role="listbox"
-        className="choice-select__list"
-        style={{ top: rectTop, height: filteredChoices.length * OPTION_HEIGHT }}
-      >
-        {filteredChoices.map(({ name: choice, icon, iconStyle }, i) => (
-          <div
-            id={`choice-${choice}`}
-            key={choice}
-            aria-selected={i === selectedIndex}
-            role="option"
-            className="choice-select__option"
-            style={{ height: OPTION_HEIGHT }}
-            onClick={(e) => handleOnClick(e, choice)}
-          >
-            <span className="choice-select__option-content">
-              <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
-              {choice}
-            </span>
-          </div>
-        ))}
-      </div>
+      <div className="choice-select__border" />
+      {filteredChoices.map(({ name: choice, icon, iconStyle }) => (
+        <label
+          id={`choice-${choice}`}
+          key={choice}
+          className={`choice-select__option`}
+          onClick={(e) => handleOnClick(e, choice)}
+        >
+          <input
+            type="radio"
+            className="choice-select__radio sr-only"
+            name={`radio-${radioId}`}
+            value={choice}
+            checked={selectedChoice === choice}
+            readOnly
+          />
+          <span className="choice-select__option-content">
+            {icon && <img src={icon} alt="" aria-hidden="true" style={iconStyle} />}
+            {choice}
+          </span>
+        </label>
+      ))}
     </div>
   )
 
@@ -109,11 +116,12 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
     const nextIndex = (selectedIndex + 1) % filteredChoices.length
     setSelectedChoice(filteredChoices[nextIndex]!.name)
   }
-  function handleOnClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>, choice: string) {
-    e.stopPropagation()
+  function handleOnClick(e: React.MouseEvent<HTMLLabelElement, MouseEvent>, choice: string) {
+    e.preventDefault()
     const el = e.currentTarget
     setPrevPosition(el)
-    if (el.getAttribute('aria-selected') === 'true') {
+    const isSame = selectedChoice === choice
+    if (isSame) {
       next()
     } else {
       setSelectedChoice(choice)

package/code-blocks/components/Tabs.css

@@ -2,16 +2,9 @@
   -webkit-tap-highlight-color: transparent;
 
   /* tablist style logic */
-  select:has(option:nth-of-type(1):checked) ~ ul[role='tablist'] li:nth-of-type(1),
-  select:has(option:nth-of-type(2):checked) ~ ul[role='tablist'] li:nth-of-type(2),
-  select:has(option:nth-of-type(3):checked) ~ ul[role='tablist'] li:nth-of-type(3),
-  select:has(option:nth-of-type(4):checked) ~ ul[role='tablist'] li:nth-of-type(4),
-  select:has(option:nth-of-type(5):checked) ~ ul[role='tablist'] li:nth-of-type(5),
-  select:has(option:nth-of-type(6):checked) ~ ul[role='tablist'] li:nth-of-type(6),
-  select:has(option:nth-of-type(7):checked) ~ ul[role='tablist'] li:nth-of-type(7) {
+  .choice-tabs__tab:has(.choice-tabs__radio:checked) {
     border-bottom: 2px solid #aaa;
     color: var(--color-text);
-    font-weight: 600;
   }
 }
 
@@ -36,7 +29,7 @@
 .choice-tabs__tab-content {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  gap: 6px;
 }
 
 .choice-tabs__tab img {

package/code-blocks/components/Tabs.tsx

@@ -1,6 +1,6 @@
 export { Tabs }
 
-import React from 'react'
+import React, { useId } from 'react'
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js'
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
 import { usePageContext } from '../../renderer/usePageContext.js'
@@ -8,89 +8,44 @@ import { assertUsage } from '../../utils/assert.js'
 import './Tabs.css'
 
 function Tabs({ choice, hide = [] }: { choice: string; hide: string[] }) {
+  const radioId = useId()
   const groupName = choice
   const pageContext = usePageContext()
-  const choicesAll = pageContext.config.docpress.choices
+  const choicesAll = pageContext.resolved.choices
   assertUsage(choicesAll && choicesAll[groupName], `${groupName} is unknown`)
-
   const { choices, default: defaultChoice } = choicesAll[groupName]
   const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice)
   const setPrevPosition = useRestoreScroll([selectedChoice])
   const isHidden = (choice: string) => hide.includes(choice)
-  const filteredChoices = choices.filter((choice) => !isHidden(choice.name))
-  const selectedIndex = filteredChoices.findIndex((choice) => choice.name === selectedChoice)
 
   return (
-    <div className="choice-tabs" data-choice-group={groupName}>
-      {/* Hidden select used to control tablist styling via CSS. */}
-      <select name={`choicesFor-${groupName}`} value={selectedChoice} hidden disabled>
-        {choices.map(({ name: choice }) => (
-          <option key={choice} value={choice}>
-            {choice}
-          </option>
-        ))}
-      </select>
-      <ul id={`choicesFor-${groupName}`} className="choice-tabs__tab-list" role="tablist">
-        {choices.map(({ name: choice, icon, iconStyle }, i) => (
-          <li
-            key={choice}
-            id={`tab-${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, choice)}
-            onKeyDown={handleOnKeyDown}
-          >
+    <div className="choice-tabs">
+      <div
+        id={`choicesFor-${groupName}`}
+        className="choice-tabs__tab-list"
+        role="radiogroup"
+        data-choice-group={groupName}
+      >
+        {choices.map(({ name: choice, icon, iconStyle }) => (
+          <label key={choice} className="choice-tabs__tab" style={{ display: isHidden(choice) ? 'none' : undefined }}>
+            <input
+              className="choice-tabs__radio sr-only"
+              type="radio"
+              name={`radio-${radioId}`}
+              value={choice}
+              checked={selectedChoice === choice}
+              onChange={(e) => {
+                setPrevPosition(e.currentTarget)
+                setSelectedChoice(choice)
+              }}
+            />
             <span className="choice-tabs__tab-content">
-              <img src={icon} alt="" aria-hidden="true" style={iconStyle} />
+              {icon && <img src={icon} alt="" aria-hidden="true" style={iconStyle} />}
               {choice}
             </span>
-          </li>
+          </label>
         ))}
-      </ul>
+      </div>
     </div>
   )
-
-  function handleOnClick(e: React.MouseEvent<HTMLLIElement, MouseEvent>, choice: string) {
-    setPrevPosition(e.currentTarget)
-    setSelectedChoice(choice)
-  }
-
-  function handleOnKeyDown(e: React.KeyboardEvent<HTMLLIElement>) {
-    const el = e.currentTarget
-    let nextIndex = selectedIndex
-
-    switch (e.key) {
-      case 'ArrowRight':
-        nextIndex = (selectedIndex + 1) % filteredChoices.length
-        break
-      case 'ArrowLeft':
-        nextIndex = (selectedIndex - 1 + filteredChoices.length) % filteredChoices.length
-        break
-      case 'Home':
-        nextIndex = 0
-        break
-      case 'End':
-        nextIndex = filteredChoices.length - 1
-        break
-      default:
-        return
-    }
-
-    e.preventDefault()
-    setPrevPosition(el)
-    const nextChoice = filteredChoices[nextIndex]!
-    setSelectedChoice(nextChoice.name)
-    const tabEl = el.parentElement?.parentElement as HTMLDivElement
-
-    if (!isInViewport(tabEl)) tabEl.scrollIntoView({ block: 'start', behavior: 'smooth' })
-    el.focus()
-  }
-}
-
-function isInViewport(el: Element) {
-  const rect = el.getBoundingClientRect()
-  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth
 }

package/code-blocks/hooks/useCurrentSelection.ts

@@ -19,19 +19,28 @@ function useCurrentSelection(choiceGroupName: string, defaultValue: string) {
 // WARNING: We cannot use `keyPrefix` here: closures don't work because we serialize the function.
 const initializeChoiceGroup_SSR = `initializeChoiceGroup();${initializeChoiceGroup.toString()};`
 function initializeChoiceGroup() {
-  const groupsElements = document.querySelectorAll<HTMLDivElement>('[data-choice-group]')
+  const groupsElements = [
+    ...document.querySelectorAll('select[data-choice-group]'),
+    ...document.querySelectorAll('div[data-choice-group]'),
+  ]
   for (const groupEl of groupsElements) {
-    const choiceGroupName = groupEl.getAttribute('data-choice-group')!
+    const choiceGroupName = groupEl.getAttribute('data-choice-group')
+    if (!choiceGroupName) continue
     const storageKey = `docpress:choice:${choiceGroupName}`
     const selectedChoice = localStorage.getItem(storageKey)
-    if (selectedChoice) {
-      const selectEl = groupEl.querySelector<HTMLSelectElement>(`select[name="choicesFor-${choiceGroupName}"]`)!
-      const selectedIndex = [...selectEl.options].findIndex((option) => option.value === selectedChoice)
-      if (selectedIndex === -1) {
-        localStorage.removeItem(storageKey)
-      } else {
-        selectEl.value = selectedChoice
-      }
+    if (!selectedChoice) continue
+    switch (groupEl.tagName) {
+      case 'SELECT':
+        const selectEl = groupEl as HTMLSelectElement
+        const optionExists = [...selectEl.options].some((opt) => opt.value === selectedChoice)
+        if (!optionExists) localStorage.removeItem(storageKey)
+        else selectEl.value = selectedChoice
+        break
+      case 'DIV':
+        const radioEl = groupEl.querySelector<HTMLInputElement>(`input[type="radio"][value="${selectedChoice}"]`)
+        if (radioEl) radioEl.checked = true
+      default:
+        break
     }
   }
 }

package/code-blocks/hooks/useMDXComponents.tsx

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

package/code-blocks/remarkChoiceGroup.ts

@@ -86,7 +86,7 @@ const remarkChoiceGroup: Plugin<[], Root> = (): Transformer<Root> => {
       // Descend into non-container nodes so that a `CustomSelectsContainer` nested inside another JSX
       // element (e.g. react-tabs `<Tabs>`/`<TabPanel>`, or a `<div>`) still gets visited and its
       // `choiceGroupAll` attribute injected. (Returning 'skip' here would stop the descent.)
-      if (node.name !== 'CustomSelectsContainer') return
+      if (node.name !== 'ChoiceGroupContainer') return
 
       const choiceGroupAll: ChoiceGroupWithParent[] = []
 

package/code-blocks/types.ts

@@ -1,9 +1,10 @@
 export type { ChoiceGroup, ChoiceGroupWithParent, ParentChoiceGroup }
 
-import type { Config } from '../types/Config.js'
+import type { Config, ChoiceItem } from '../types/Config.js'
 
-type ChoiceGroup = NonNullable<Config['choices']>[string] & {
+type ChoiceGroup = Omit<NonNullable<Config['choices']>[string], 'choices'> & {
   name: string
+  choices: ChoiceItem[]
   emptyChoices: string[]
   hidden: boolean
   lvl: number

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -8,6 +8,7 @@ import type { MdxJsxAttribute, MdxJsxFlowElement, MdxJsxFlowElementData } from '
 import { getVikeConfig } from 'vike/plugin'
 import { assertUsage } from '../../utils/assert.js'
 import { valueToEstree } from 'estree-util-value-to-estree'
+import { resolveChoices } from './resolveChoices.js'
 
 type ChoiceNode = {
   choiceValue: string
@@ -130,7 +131,7 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide
   if (lvl === 0) {
     return {
       type: 'mdxJsxFlowElement',
-      name: 'CustomSelectsContainer',
+      name: 'ChoiceGroupContainer',
       attributes: [],
       children: [choiceGroupNode],
     }
@@ -143,7 +144,7 @@ function resolveChoiceGroupNodes(choiceNodes: ChoiceNode[]) {
   const vikeConfig = getVikeConfig()
   const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue)
   const { choices: choicesConfig } = vikeConfig.config.docpress
-  const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig }
+  const choicesAll = resolveChoices({ ...CHOICES_BUILT_IN, ...choicesConfig })
 
   // Resolve to the group that defines ALL of the block's values. Matching a group that merely
   // shares ANY value would mis-resolve a custom group that collides with a built-in on a single
@@ -153,13 +154,12 @@ function resolveChoiceGroupNodes(choiceNodes: ChoiceNode[]) {
   )
   assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`)
 
-  const emptyChoices = choicesAll[groupName]!.choices.filter((choice) => !choices.includes(choice.name)).map(
-    (choice) => choice.name,
-  )
+  const group = choicesAll[groupName]!
+  const emptyChoices = group.choices.filter((choice) => !choices.includes(choice.name)).map((choice) => choice.name)
 
   const choiceGroup = {
     name: groupName,
-    ...choicesAll[groupName]!,
+    ...group,
     emptyChoices,
   }
 

package/code-blocks/utils/resolveChoices.ts

@@ -0,0 +1,15 @@
+export { resolveChoices }
+export type { ResolvedChoices }
+
+import type { Choice, ChoiceItem } from '../../types/Config.js'
+
+type ResolvedChoices = Record<string, Omit<Choice, 'choices'> & { choices: ChoiceItem[] }>
+
+function resolveChoices(choicesConfig: Record<string, Choice>): ResolvedChoices {
+  return Object.fromEntries(
+    Object.entries(choicesConfig).map(([name, group]) => [name, { ...group, choices: group.choices.map(resolveChoice) }]),
+  )
+}
+function resolveChoice(choice: string | ChoiceItem): ChoiceItem {
+  return typeof choice === 'string' ? { name: choice } : choice
+}

package/css/index.css

@@ -8,3 +8,4 @@
 @import './table.css';
 @import './tooltip.css';
 @import '@docsearch/css/dist/style.css';
+@import './sr-only.css';

package/css/sr-only.css

@@ -0,0 +1,11 @@
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

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

@@ -1,61 +1,27 @@
 export { Tabs };
-import React from 'react';
+import React, { useId } from 'react';
 import { useCurrentSelection } from '../hooks/useCurrentSelection.js';
 import { useRestoreScroll } from '../hooks/useRestoreScroll.js';
 import { usePageContext } from '../../renderer/usePageContext.js';
 import { assertUsage } from '../../utils/assert.js';
 import './Tabs.css';
 function Tabs({ choice, hide = [] }) {
+    const radioId = useId();
     const groupName = choice;
     const pageContext = usePageContext();
-    const choicesAll = pageContext.config.docpress.choices;
+    const choicesAll = pageContext.resolved.choices;
     assertUsage(choicesAll && choicesAll[groupName], `${groupName} is unknown`);
     const { choices, default: defaultChoice } = choicesAll[groupName];
     const [selectedChoice, setSelectedChoice] = useCurrentSelection(groupName, defaultChoice);
     const setPrevPosition = useRestoreScroll([selectedChoice]);
     const isHidden = (choice) => hide.includes(choice);
-    const filteredChoices = choices.filter((choice) => !isHidden(choice.name));
-    const selectedIndex = filteredChoices.findIndex((choice) => choice.name === 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(({ name: choice }) => (React.createElement("option", { key: choice, value: choice }, choice)))),
-        React.createElement("ul", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "tablist" }, choices.map(({ name: choice, icon, iconStyle }, i) => (React.createElement("li", { key: choice, id: `tab-${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, choice), onKeyDown: handleOnKeyDown },
+    return (React.createElement("div", { className: "choice-tabs" },
+        React.createElement("div", { id: `choicesFor-${groupName}`, className: "choice-tabs__tab-list", role: "radiogroup", "data-choice-group": groupName }, choices.map(({ name: choice, icon, iconStyle }) => (React.createElement("label", { key: choice, className: "choice-tabs__tab", style: { display: isHidden(choice) ? 'none' : undefined } },
+            React.createElement("input", { className: "choice-tabs__radio sr-only", type: "radio", name: `radio-${radioId}`, value: choice, checked: selectedChoice === choice, onChange: (e) => {
+                    setPrevPosition(e.currentTarget);
+                    setSelectedChoice(choice);
+                } }),
             React.createElement("span", { className: "choice-tabs__tab-content" },
-                React.createElement("img", { src: icon, alt: "", "aria-hidden": "true", style: iconStyle }),
+                icon && React.createElement("img", { src: icon, alt: "", "aria-hidden": "true", style: iconStyle }),
                 choice)))))));
-    function handleOnClick(e, choice) {
-        setPrevPosition(e.currentTarget);
-        setSelectedChoice(choice);
-    }
-    function handleOnKeyDown(e) {
-        const el = e.currentTarget;
-        let nextIndex = selectedIndex;
-        switch (e.key) {
-            case 'ArrowRight':
-                nextIndex = (selectedIndex + 1) % filteredChoices.length;
-                break;
-            case 'ArrowLeft':
-                nextIndex = (selectedIndex - 1 + filteredChoices.length) % filteredChoices.length;
-                break;
-            case 'Home':
-                nextIndex = 0;
-                break;
-            case 'End':
-                nextIndex = filteredChoices.length - 1;
-                break;
-            default:
-                return;
-        }
-        e.preventDefault();
-        setPrevPosition(el);
-        const nextChoice = filteredChoices[nextIndex];
-        setSelectedChoice(nextChoice.name);
-        const tabEl = el.parentElement?.parentElement;
-        if (!isInViewport(tabEl))
-            tabEl.scrollIntoView({ block: 'start', behavior: 'smooth' });
-        el.focus();
-    }
-}
-function isInViewport(el) {
-    const rect = el.getBoundingClientRect();
-    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
 }

package/dist/code-blocks/hooks/useCurrentSelection.js

@@ -15,20 +15,33 @@ function useCurrentSelection(choiceGroupName, defaultValue) {
 // WARNING: We cannot use `keyPrefix` here: closures don't work because we serialize the function.
 const initializeChoiceGroup_SSR = `initializeChoiceGroup();${initializeChoiceGroup.toString()};`;
 function initializeChoiceGroup() {
-    const groupsElements = document.querySelectorAll('[data-choice-group]');
+    const groupsElements = [
+        ...document.querySelectorAll('select[data-choice-group]'),
+        ...document.querySelectorAll('div[data-choice-group]'),
+    ];
     for (const groupEl of groupsElements) {
         const choiceGroupName = groupEl.getAttribute('data-choice-group');
+        if (!choiceGroupName)
+            continue;
         const storageKey = `docpress:choice:${choiceGroupName}`;
         const selectedChoice = localStorage.getItem(storageKey);
-        if (selectedChoice) {
-            const selectEl = groupEl.querySelector(`select[name="choicesFor-${choiceGroupName}"]`);
-            const selectedIndex = [...selectEl.options].findIndex((option) => option.value === selectedChoice);
-            if (selectedIndex === -1) {
-                localStorage.removeItem(storageKey);
-            }
-            else {
-                selectEl.value = selectedChoice;
-            }
+        if (!selectedChoice)
+            continue;
+        switch (groupEl.tagName) {
+            case 'SELECT':
+                const selectEl = groupEl;
+                const optionExists = [...selectEl.options].some((opt) => opt.value === selectedChoice);
+                if (!optionExists)
+                    localStorage.removeItem(storageKey);
+                else
+                    selectEl.value = selectedChoice;
+                break;
+            case 'DIV':
+                const radioEl = groupEl.querySelector(`input[type="radio"][value="${selectedChoice}"]`);
+                if (radioEl)
+                    radioEl.checked = true;
+            default:
+                break;
         }
     }
 }

package/dist/code-blocks/remarkChoiceGroup.js

@@ -70,7 +70,7 @@ const remarkChoiceGroup = () => {
             // Descend into non-container nodes so that a `CustomSelectsContainer` nested inside another JSX
             // element (e.g. react-tabs `<Tabs>`/`<TabPanel>`, or a `<div>`) still gets visited and its
             // `choiceGroupAll` attribute injected. (Returning 'skip' here would stop the descent.)
-            if (node.name !== 'CustomSelectsContainer')
+            if (node.name !== 'ChoiceGroupContainer')
                 return;
             const choiceGroupAll = [];
             visit(node, 'mdxJsxFlowElement', (child) => {

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

@@ -1,7 +1,8 @@
 export type { ChoiceGroup, ChoiceGroupWithParent, ParentChoiceGroup };
-import type { Config } from '../types/Config.js';
-type ChoiceGroup = NonNullable<Config['choices']>[string] & {
+import type { Config, ChoiceItem } from '../types/Config.js';
+type ChoiceGroup = Omit<NonNullable<Config['choices']>[string], 'choices'> & {
     name: string;
+    choices: ChoiceItem[];
     emptyChoices: string[];
     hidden: boolean;
     lvl: number;

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

@@ -2,6 +2,7 @@ export { generateChoiceGroupCode, expressionToAttribute };
 import { getVikeConfig } from 'vike/plugin';
 import { assertUsage } from '../../utils/assert.js';
 import { valueToEstree } from 'estree-util-value-to-estree';
+import { resolveChoices } from './resolveChoices.js';
 // TODO: determine icon representation for CHOICES_BUILT_IN given lack of SVG/file import support
 // use SVG URLs for now
 const CHOICES_BUILT_IN = {
@@ -107,7 +108,7 @@ function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
     if (lvl === 0) {
         return {
             type: 'mdxJsxFlowElement',
-            name: 'CustomSelectsContainer',
+            name: 'ChoiceGroupContainer',
             attributes: [],
             children: [choiceGroupNode],
         };
@@ -118,16 +119,17 @@ function resolveChoiceGroupNodes(choiceNodes) {
     const vikeConfig = getVikeConfig();
     const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue);
     const { choices: choicesConfig } = vikeConfig.config.docpress;
-    const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig };
+    const choicesAll = resolveChoices({ ...CHOICES_BUILT_IN, ...choicesConfig });
     // Resolve to the group that defines ALL of the block's values. Matching a group that merely
     // shares ANY value would mis-resolve a custom group that collides with a built-in on a single
     // value — e.g. a `runtime` group [Node, Bun, Deno, Cloudflare] sharing `Bun` with `pkgManager`.
     const groupName = Object.keys(choicesAll).find((key) => choices.every((choice) => choicesAll[key].choices.some(({ name }) => name === choice)));
     assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`);
-    const emptyChoices = choicesAll[groupName].choices.filter((choice) => !choices.includes(choice.name)).map((choice) => choice.name);
+    const group = choicesAll[groupName];
+    const emptyChoices = group.choices.filter((choice) => !choices.includes(choice.name)).map((choice) => choice.name);
     const choiceGroup = {
         name: groupName,
-        ...choicesAll[groupName],
+        ...group,
         emptyChoices,
     };
     const mergedChoiceNodes = choiceGroup.choices.map((choice) => {

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

@@ -0,0 +1,7 @@
+export { resolveChoices };
+export type { ResolvedChoices };
+import type { Choice, ChoiceItem } from '../../types/Config.js';
+type ResolvedChoices = Record<string, Omit<Choice, 'choices'> & {
+    choices: ChoiceItem[];
+}>;
+declare function resolveChoices(choicesConfig: Record<string, Choice>): ResolvedChoices;

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

@@ -0,0 +1,7 @@
+export { resolveChoices };
+function resolveChoices(choicesConfig) {
+    return Object.fromEntries(Object.entries(choicesConfig).map(([name, group]) => [name, { ...group, choices: group.choices.map(resolveChoice) }]));
+}
+function resolveChoice(choice) {
+    return typeof choice === 'string' ? { name: choice } : choice;
+}

package/dist/renderer/usePageContext.d.ts

@@ -16,6 +16,7 @@ declare function usePageContextLegacy(): {
     pageTitle: string | null;
     documentTitle: string;
     activeCategoryName: string;
+    choices: import("../code-blocks/utils/resolveChoices.js").ResolvedChoices | undefined;
 };
 declare function usePageContext(): PageContext;
 declare function PageContextProvider({ pageContext, children, }: {

package/dist/resolvePageContext.d.ts

@@ -16,4 +16,5 @@ declare function resolvePageContext(pageContext: PageContextServer): {
     pageTitle: string | null;
     documentTitle: string;
     activeCategoryName: string;
+    choices: import("./code-blocks/utils/resolveChoices.js").ResolvedChoices | undefined;
 };

package/dist/resolvePageContext.js

@@ -4,6 +4,7 @@ import { jsxToTextContent } from './utils/jsxToTextContent.js';
 import pc from '@brillout/picocolors';
 import { parseMarkdownMini } from './parseMarkdownMini.js';
 import { determineNavItemsColumnLayout } from './determineNavItemsColumnLayout.js';
+import { resolveChoices } from './code-blocks/utils/resolveChoices.js';
 function resolvePageContext(pageContext) {
     const config = pageContext.globalContext.config.docpress;
     const { urlPathname } = pageContext;
@@ -45,6 +46,7 @@ function resolvePageContext(pageContext) {
     }
     // Don't show landing page in navigation
     navItemsAll = navItemsAll.filter((navItem) => navItem.url !== '/');
+    const choices = config.choices && resolveChoices(config.choices);
     const resolved = {
         navItemsAll,
         navItemsDetached,
@@ -54,6 +56,7 @@ function resolvePageContext(pageContext) {
         pageTitle,
         documentTitle,
         activeCategoryName,
+        choices,
     };
     return resolved;
 }

package/dist/types/Config.d.ts

@@ -1,4 +1,4 @@
-export type { Config };
+export type { Config, Choice, ChoiceItem };
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading.js';
 import type React from 'react';
 type Config = {
@@ -47,11 +47,13 @@ type Category = string | {
     /** Hide from Algolia search */
     hide?: boolean;
 };
+/** A choice. A plain `string` is shorthand for `{ name: string }` (no icon). */
+type ChoiceItem = {
+    name: string;
+    icon?: string;
+    iconStyle?: React.CSSProperties;
+};
 type Choice = {
-    choices: {
-        name: string;
-        icon: string;
-        iconStyle?: React.CSSProperties;
-    }[];
+    choices: (string | ChoiceItem)[];
     default: string;
 };

package/package.json

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

package/resolvePageContext.ts

@@ -18,6 +18,7 @@ import { jsxToTextContent } from './utils/jsxToTextContent.js'
 import pc from '@brillout/picocolors'
 import { parseMarkdownMini } from './parseMarkdownMini.js'
 import { determineNavItemsColumnLayout } from './determineNavItemsColumnLayout.js'
+import { resolveChoices } from './code-blocks/utils/resolveChoices.js'
 
 type PageSectionResolved = {
   url: string | null
@@ -80,6 +81,8 @@ function resolvePageContext(pageContext: PageContextServer) {
   // Don't show landing page in navigation
   navItemsAll = navItemsAll.filter((navItem) => navItem.url !== '/')
 
+  const choices = config.choices && resolveChoices(config.choices)
+
   const resolved = {
     navItemsAll,
     navItemsDetached,
@@ -89,6 +92,7 @@ function resolvePageContext(pageContext: PageContextServer) {
     pageTitle,
     documentTitle,
     activeCategoryName,
+    choices,
   }
   return resolved
 }

package/types/Config.ts

@@ -1,4 +1,4 @@
-export type { Config }
+export type { Config, Choice, ChoiceItem }
 
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading.js'
 import type React from 'react'
@@ -62,7 +62,9 @@ type Category =
       hide?: boolean
     }
 
+/** A choice. A plain `string` is shorthand for `{ name: string }` (no icon). */
+type ChoiceItem = { name: string; icon?: string; iconStyle?: React.CSSProperties }
 type Choice = {
-  choices: { name: string; icon: string; iconStyle?: React.CSSProperties }[]
+  choices: (string | ChoiceItem)[]
   default: string
 }