@brillout/docpress 0.17.1 → 0.17.3

package/code-blocks/components/ChoiceGroup.css

@@ -1,3 +1,10 @@
+.choice-group-container.always-show {
+  .choice-group__selects,
+  .copy-button {
+    opacity: 1 !important;
+  }
+}
+
 .choice-group-container {
   position: relative;
 
@@ -18,6 +25,12 @@
     gap: 2px;
     top: var(--top-position);
     right: 42px;
+    opacity: 0;
+    transition: opacity 200ms ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   .choice-select__list {
@@ -139,6 +152,55 @@
     display: none !important;
   }
 
+  /* Keep these breakpoints in sync with:
+  * https://github.com/brillout/docpress/blob/08b63e867c4c052479e19a6943ca5535b2762d02/src/css/code/block.css#L40-L56
+  */
+  @media not all and (hover: hover) and (pointer: fine) {
+    .choice-group__selects,
+    .copy-button {
+      opacity: 1 !important;
+    }
+    .choice-select__option {
+      padding: 5px;
+    }
+    @container container-viewport (max-width: 620px) {
+      .choice-select__option-label {
+        font-size: 12px !important;
+      }
+      .choice-select__option-icon {
+        width: 13px !important;
+      }
+      .choice-select__option-content img {
+        width: 11.5px !important;
+        height: 11.5px !important;
+      }
+    }
+    @container container-viewport (max-width: 550px) {
+      .choice-select__option-label {
+        font-size: 11px !important;
+      }
+      .choice-select__option-icon {
+        width: 12px !important;
+      }
+      .choice-select__option-content img {
+        width: 11px !important;
+        height: 11px !important;
+      }
+    }
+    @container container-viewport (max-width: 450px) {
+      .choice-select__option-label {
+        font-size: 10px !important;
+      }
+      .choice-select__option-icon {
+        width: 11px !important;
+      }
+      .choice-select__option-content img {
+        width: 10px !important;
+        height: 10px !important;
+      }
+    }
+  }
+
   .choice-select__list:has(.choice-select__option:nth-of-type(1) .choice-select__radio:checked) {
     top: 0;
     clip-path: inset(
@@ -211,6 +273,18 @@
   }
 }
 
+.choice-group-container:has(.choice-group__selects:hover) .copy-button {
+  opacity: 1;
+}
+
+.choice-group:has(.choice:hover) .copy-button {
+  opacity: 1;
+}
+
+.choice-group:has(.choice:hover) ~ .choice-group__selects {
+  opacity: 1;
+}
+
 .choice-group {
   /* choice visibility logic */
   select:has(option:nth-of-type(1):not(:checked)) ~ .choice:nth-of-type(1),

package/code-blocks/components/ChoiceGroup.tsx

@@ -14,8 +14,10 @@ function ChoiceGroupContainer({
   choiceGroupAll,
 }: { children: React.ReactNode; choiceGroupAll: ChoiceGroupWithParent[] }) {
   const renderCustomSelect = (choiceGroupAll ?? []).some((choiceGroup) => choiceGroup.lvl === 0 && !choiceGroup.hidden)
+  const alwaysShow = (choiceGroupAll ?? []).some((choiceGroup) => renderCustomSelect && !!choiceGroup.alwaysShow)
+
   return (
-    <div className="choice-group-container">
+    <div className={cls(['choice-group-container', alwaysShow && 'always-show'])}>
       {children}
       {renderCustomSelect && (
         <div className={`choice-group__selects`}>
@@ -149,5 +151,7 @@ function CustomSelect({ choiceGroup }: { choiceGroup: ChoiceGroupWithParent }) {
     } else {
       setSelectedChoice(choice)
     }
+
+    if (lastPointerType.current !== 'mouse') setExpanded(false)
   }
 }

package/code-blocks/components/Pre.css

@@ -14,6 +14,12 @@ pre {
     position: relative;
   }
 
+  &:hover {
+    .copy-button {
+      opacity: 1;
+    }
+  }
+
   .copy-button {
     position: absolute !important;
     top: 10px;
@@ -22,7 +28,8 @@ pre {
     height: 25px;
     width: 30px;
     background-color: #f7f7f7;
-    transition: background-color 0.4s ease-in-out;
+    opacity: 0;
+    transition: background-color 0.4s ease-in-out, opacity 200ms ease-in-out;
 
     &:not(:hover) {
       background-color: #eee;

package/code-blocks/components/Tabs.css

@@ -81,4 +81,4 @@
 
 .choice-tabs__tab:focus {
   outline: none;
-}
+}

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -47,6 +47,7 @@ const CHOICES_BUILT_IN: NonNullable<Config['choices']> = {
       { name: 'Yarn', icon: YARN_ICON, iconStyle: { height: '12px' } },
     ],
     default: 'npm',
+    alwaysShow: true,
   },
 }
 
@@ -160,6 +161,7 @@ function resolveChoiceGroupNodes(choiceNodes: ChoiceNode[]) {
     name: groupName,
     ...group,
     emptyChoices,
+    alwaysShow: !!group.alwaysShow,
   }
 
   const mergedChoiceNodes: ChoiceNode[] = choiceGroup.choices.map((choice) => {

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

@@ -35,6 +35,7 @@ const CHOICES_BUILT_IN = {
             { name: 'Yarn', icon: YARN_ICON, iconStyle: { height: '12px' } },
         ],
         default: 'npm',
+        alwaysShow: true,
     },
 };
 function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
@@ -130,6 +131,7 @@ function resolveChoiceGroupNodes(choiceNodes) {
         name: groupName,
         ...group,
         emptyChoices,
+        alwaysShow: !!group.alwaysShow,
     };
     const mergedChoiceNodes = choiceGroup.choices.map((choice) => {
         const node = choiceNodes.find((node) => node.choiceValue === choice.name);

package/dist/types/Config.d.ts

@@ -69,4 +69,10 @@ type ChoiceItem = {
 type Choice = {
     choices: (string | ChoiceItem)[];
     default: string;
+    /**
+     * Whether to always show the dropdown.
+     *
+     * @default false
+     */
+    alwaysShow?: boolean;
 };

package/package.json

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

package/types/Config.ts

@@ -85,4 +85,10 @@ type ChoiceItem = {
 type Choice = {
   choices: (string | ChoiceItem)[]
   default: string
+  /**
+   * Whether to always show the dropdown.
+   *
+   * @default false
+   */
+  alwaysShow?: boolean
 }