@kolkrabbi/kol-component 0.32.1 → 0.32.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.32.1",
+  "version": "0.32.3",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -24,7 +24,7 @@
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
     "react-syntax-highlighter": "^16.1.1",
-    "@kolkrabbi/kol-icons": "0.12.1"
+    "@kolkrabbi/kol-icons": "^0.13.0"
   },
   "peerDependencies": {
     "framer-motion": "^12.0.0",

package/src/atoms/Popover.jsx

@@ -67,7 +67,8 @@ export function usePopover({
   if (matchReferenceWidth) {
     middleware.push(
       sizeMw({
-        apply({ rects, elements }) {
+        padding: 8,
+        apply({ rects, elements, availableHeight }) {
           /* FLOOR again, not exact (2026-08-09 evening, user: "if you have
            * to truncate 'centered' then its too narrow" — overrides the
            * morning's exact-width reading of the one-piece ruling for the
@@ -81,8 +82,14 @@ export function usePopover({
            * row. Letting the panel size itself was the broken middle: an
            * abs-positioned float with auto width sizes against available
            * space, not content. Sole consumer is Dropdown. */
+          /* VIEWPORT CLAMP (2026-08-09, kol-ds-fxr lobby ticket): flip is
+           * off on Dropdown (fused edge), so a long list (the labs 30-item
+           * "Add FX…" picker) otherwise renders past the viewport bottom.
+           * Cap the panel to the space below the trigger; .kol-dd-list
+           * scrolls inside (panel is a flex column in kol-theme). */
           Object.assign(elements.floating.style, {
             width: `${rects.reference.width}px`,
+            maxHeight: `${Math.max(0, Math.floor(availableHeight))}px`,
           })
         },
       })

package/src/molecules/Dropdown.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import { MenuDropdownItem } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../atoms/Popover.jsx'
@@ -79,6 +79,16 @@ const Dropdown = ({
 
   const currentOption = options.find((opt) => opt.value === value) || options[0]
 
+  /* A clamped list (Popover caps the panel to the viewport) can open with the
+   * checked row past the fold — scroll it into reach. Keyboard focus after
+   * that scrolls natively; the list's children are the option buttons 1:1. */
+  const listRef = useRef(null)
+  useEffect(() => {
+    if (!isOpen) return
+    const idx = options.findIndex((opt) => opt.value === currentOption?.value)
+    listRef.current?.children[idx]?.scrollIntoView({ block: 'nearest' })
+  }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const triggerCls = [
     'kol-btn',
     /* grey is dropdown-only chrome (2026-07-15) — no kol-btn-* class so it
@@ -125,7 +135,7 @@ const Dropdown = ({
       >
         {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
 
-        <div className="kol-dd-list" role="listbox">
+        <div ref={listRef} className="kol-dd-list" role="listbox">
           {options.map((option) => {
             const isActive = option.value === currentOption?.value
             return (