@railtownai/railtracks-visualizer 0.0.30 → 0.0.31

package/dist/cjs/index.js

@@ -24478,6 +24478,7 @@ const SelectContent = styled(Content2)`
   z-index: 50;
   min-width: 8rem;
   overflow: hidden;
+  max-height: ${(props)=>props.$maxHeight || "none"};
   border-radius: ${(props)=>props.$theme.borderRadius.lg};
   border: 1px solid ${(props)=>props.$theme.colors.border};
   background-color: ${(props)=>props.$theme.colors.background};
@@ -24584,16 +24585,45 @@ const SelectScrollDownButtonWithRef = /*#__PURE__*/ React__namespace.forwardRef(
     }));
 });
 SelectScrollDownButtonWithRef.displayName = ScrollDownButton.displayName;
-const SelectContentWithRef = /*#__PURE__*/ React__namespace.forwardRef(({ children, position = "popper", ...props }, ref)=>{
+const SelectContentWithRef = /*#__PURE__*/ React__namespace.forwardRef(({ children, position = "popper", maxItems = 6, itemHeight = "2.5rem", ...props }, ref)=>{
     const { theme } = useTheme();
+    const viewportRef = React__namespace.useRef(null);
+    // Calculate max height based on maxItems and itemHeight
+    const maxHeight = maxItems ? `calc(${itemHeight} * ${maxItems} + 8px)` : "none";
+    // Handle scroll wheel events for smooth scrolling
+    const handleWheel = React__namespace.useCallback((e)=>{
+        if (viewportRef.current) {
+            e.preventDefault();
+            const scrollAmount = e.deltaY;
+            viewportRef.current.scrollTop += scrollAmount;
+        }
+    }, []);
+    React__namespace.useEffect(()=>{
+        const viewport = viewportRef.current;
+        if (viewport) {
+            viewport.addEventListener("wheel", handleWheel, {
+                passive: false
+            });
+            return ()=>{
+                viewport.removeEventListener("wheel", handleWheel);
+            };
+        }
+    }, [
+        handleWheel
+    ]);
     return /*#__PURE__*/ React__namespace.createElement(Portal$1, null, /*#__PURE__*/ React__namespace.createElement(SelectContent, {
         ref: ref,
         position: position,
         $theme: theme,
+        $maxHeight: maxHeight,
         ...props
     }, /*#__PURE__*/ React__namespace.createElement(SelectScrollUpButtonWithRef, null), /*#__PURE__*/ React__namespace.createElement(Viewport, {
+        ref: viewportRef,
         style: {
-            padding: "4px"
+            padding: "4px",
+            maxHeight: maxHeight !== "none" ? `calc(${maxHeight} - 8px)` : "none",
+            overflowY: "auto",
+            scrollBehavior: "smooth"
         }
     }, children), /*#__PURE__*/ React__namespace.createElement(SelectScrollDownButtonWithRef, null)));
 });

package/dist/esm/index.js

@@ -24458,6 +24458,7 @@ const SelectContent = styled(Content2)`
   z-index: 50;
   min-width: 8rem;
   overflow: hidden;
+  max-height: ${(props)=>props.$maxHeight || "none"};
   border-radius: ${(props)=>props.$theme.borderRadius.lg};
   border: 1px solid ${(props)=>props.$theme.colors.border};
   background-color: ${(props)=>props.$theme.colors.background};
@@ -24564,16 +24565,45 @@ const SelectScrollDownButtonWithRef = /*#__PURE__*/ React.forwardRef(({ ...props
     }));
 });
 SelectScrollDownButtonWithRef.displayName = ScrollDownButton.displayName;
-const SelectContentWithRef = /*#__PURE__*/ React.forwardRef(({ children, position = "popper", ...props }, ref)=>{
+const SelectContentWithRef = /*#__PURE__*/ React.forwardRef(({ children, position = "popper", maxItems = 6, itemHeight = "2.5rem", ...props }, ref)=>{
     const { theme } = useTheme();
+    const viewportRef = React.useRef(null);
+    // Calculate max height based on maxItems and itemHeight
+    const maxHeight = maxItems ? `calc(${itemHeight} * ${maxItems} + 8px)` : "none";
+    // Handle scroll wheel events for smooth scrolling
+    const handleWheel = React.useCallback((e)=>{
+        if (viewportRef.current) {
+            e.preventDefault();
+            const scrollAmount = e.deltaY;
+            viewportRef.current.scrollTop += scrollAmount;
+        }
+    }, []);
+    React.useEffect(()=>{
+        const viewport = viewportRef.current;
+        if (viewport) {
+            viewport.addEventListener("wheel", handleWheel, {
+                passive: false
+            });
+            return ()=>{
+                viewport.removeEventListener("wheel", handleWheel);
+            };
+        }
+    }, [
+        handleWheel
+    ]);
     return /*#__PURE__*/ React.createElement(Portal$1, null, /*#__PURE__*/ React.createElement(SelectContent, {
         ref: ref,
         position: position,
         $theme: theme,
+        $maxHeight: maxHeight,
         ...props
     }, /*#__PURE__*/ React.createElement(SelectScrollUpButtonWithRef, null), /*#__PURE__*/ React.createElement(Viewport, {
+        ref: viewportRef,
         style: {
-            padding: "4px"
+            padding: "4px",
+            maxHeight: maxHeight !== "none" ? `calc(${maxHeight} - 8px)` : "none",
+            overflowY: "auto",
+            scrollBehavior: "smooth"
         }
     }, children), /*#__PURE__*/ React.createElement(SelectScrollDownButtonWithRef, null)));
 });

package/dist/types/components/ui/select.d.ts

@@ -6,7 +6,11 @@ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.Selec
 declare const SelectTriggerWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButtonWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButtonWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectContentWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+    maxItems?: number;
+    itemHeight?: string;
+}
+declare const SelectContentWithRef: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectLabelWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectItemWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparatorWithRef: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
@@ -43,7 +43,7 @@
     "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
-    "@railtownai/railtracks-timeline": "0.0.5",
+    "@railtownai/railtracks-timeline": "0.0.10",
     "@xyflow/react": "12.8.4",
     "lucide-react": "0.542.0",
     "moment": "2.30.1",
@@ -77,11 +77,11 @@
     "@rollup/plugin-node-resolve": "16.0.1",
     "@rollup/plugin-swc": "0.4.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@storybook/addon-a11y": "9.1.5",
-    "@storybook/addon-docs": "9.1.5",
-    "@storybook/addon-onboarding": "9.1.5",
-    "@storybook/addon-vitest": "9.1.5",
-    "@storybook/react-vite": "9.1.5",
+    "@storybook/addon-a11y": "9.1.10",
+    "@storybook/addon-docs": "9.1.10",
+    "@storybook/addon-onboarding": "9.1.10",
+    "@storybook/addon-vitest": "9.1.10",
+    "@storybook/react-vite": "9.1.10",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -102,7 +102,7 @@
     "prettier": "3.6.2",
     "rollup": "4.50.1",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "9.1.5",
+    "storybook": "9.1.10",
     "tslib": "2.8.1",
     "typescript": "5.9.2",
     "vite": "7.1.5",