@noya-app/noya-designsystem 0.1.77 → 0.1.79

package/src/components/__tests__/Virtualized.math.test.ts

@@ -2,6 +2,7 @@ import { expect, test } from "bun:test";
 import {
   buildMeasurements,
   calculateScrollOffsetForIndex,
+  calculateStickyRows,
   calculateVisibleRange,
   clampGapValue,
   findFirstVisibleIndex,
@@ -120,7 +121,9 @@ test("calculateScrollOffsetForIndex scrolls down when item below viewport", () =
     currentScrollTop: 0,
   });
 
-  expect(offset).toBe(120);
+  // With default "auto" alignment, scrolls minimum distance to show item at bottom
+  // Item 4 ends at 150, viewport is 60, so scrollTop = 150 - 60 = 90
+  expect(offset).toBe(90);
 });
 
 test("calculateScrollOffsetForIndex clamps to end of content", () => {
@@ -151,3 +154,425 @@ test("calculateScrollOffsetForIndex aligns bottom when item taller than viewport
 
   expect(offset).toBe(180);
 });
+
+// Alignment option tests
+test("calculateScrollOffsetForIndex with align='start' always aligns to top", () => {
+  // Item is below viewport - should align to top (start)
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 4,
+    currentScrollTop: 0,
+    align: "start",
+  });
+
+  // Item 4 starts at 120, so scroll to 120 (top-aligned)
+  expect(offset).toBe(120);
+});
+
+test("calculateScrollOffsetForIndex with align='start' scrolls even when visible", () => {
+  // Item is visible but not at top - should still scroll to top-align it
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 90,
+    totalHeight: 210,
+    targetIndex: 2,
+    currentScrollTop: 30, // Item 2 (60-90) is visible within viewport (30-120)
+    align: "start",
+  });
+
+  // Should scroll to align item 2 at top (start at 60)
+  expect(offset).toBe(60);
+});
+
+test("calculateScrollOffsetForIndex with align='end' always aligns to bottom", () => {
+  // Item is above viewport - should align to bottom (end)
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 1,
+    currentScrollTop: 120,
+    align: "end",
+  });
+
+  // Item 1 ends at 60, viewport is 60px, so scroll to 60 - 60 = 0
+  expect(offset).toBe(0);
+});
+
+test("calculateScrollOffsetForIndex with align='end' scrolls even when visible", () => {
+  // Item is visible but not at bottom - should still scroll to bottom-align it
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 90,
+    totalHeight: 210,
+    targetIndex: 2,
+    currentScrollTop: 60, // Item 2 (60-90) is visible at top of viewport (60-150)
+    align: "end",
+  });
+
+  // Should scroll to align item 2 at bottom (end at 90, viewport 90, so scrollTop = 90 - 90 = 0)
+  expect(offset).toBe(0);
+});
+
+test("calculateScrollOffsetForIndex with align='center' centers item in viewport", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 90,
+    totalHeight: 210,
+    targetIndex: 3,
+    currentScrollTop: 0,
+    align: "center",
+  });
+
+  // Item 3: start=90, size=30, viewport=90
+  // Center offset = 90 - (90 - 30) / 2 = 90 - 30 = 60
+  expect(offset).toBe(60);
+});
+
+test("calculateScrollOffsetForIndex with align='center' clamps to bounds", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 90,
+    totalHeight: 210,
+    targetIndex: 0,
+    currentScrollTop: 100,
+    align: "center",
+  });
+
+  // Item 0: start=0, size=30, viewport=90
+  // Center offset = 0 - (90 - 30) / 2 = -30, clamped to 0
+  expect(offset).toBe(0);
+});
+
+test("calculateScrollOffsetForIndex with align='auto' returns undefined when visible", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 90,
+    totalHeight: 210,
+    targetIndex: 2,
+    currentScrollTop: 30, // Item 2 (60-90) is fully visible within viewport (30-120)
+    align: "auto",
+  });
+
+  expect(offset).toBeUndefined();
+});
+
+test("calculateScrollOffsetForIndex with align='auto' scrolls minimum distance (item below)", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 4,
+    currentScrollTop: 0,
+    align: "auto",
+  });
+
+  // Item 4 ends at 150, viewport is 60, so minimum scroll puts it at bottom
+  // scrollTop = 150 - 60 = 90
+  expect(offset).toBe(90);
+});
+
+test("calculateScrollOffsetForIndex with align='auto' scrolls minimum distance (item above)", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 1,
+    currentScrollTop: 120,
+    align: "auto",
+  });
+
+  // Item 1 starts at 30, so scroll to show it at top
+  expect(offset).toBe(30);
+});
+
+// Padding option tests
+test("calculateScrollOffsetForIndex with padding number applies to start alignment", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 3,
+    currentScrollTop: 0,
+    align: "start",
+    padding: 10,
+  });
+
+  // Item 3 starts at 90, with 10px padding above: 90 - 10 = 80
+  expect(offset).toBe(80);
+});
+
+test("calculateScrollOffsetForIndex with padding number applies to end alignment", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 2,
+    currentScrollTop: 150,
+    align: "end",
+    padding: 10,
+  });
+
+  // Item 2 ends at 90, viewport 60, with 10px padding below: 90 - 60 + 10 = 40
+  expect(offset).toBe(40);
+});
+
+test("calculateScrollOffsetForIndex with padding object applies top padding", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 3,
+    currentScrollTop: 0,
+    align: "start",
+    padding: { top: 15 },
+  });
+
+  // Item 3 starts at 90, with 15px padding above: 90 - 15 = 75
+  expect(offset).toBe(75);
+});
+
+test("calculateScrollOffsetForIndex with padding object applies bottom padding", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 2,
+    currentScrollTop: 150,
+    align: "end",
+    padding: { bottom: 20 },
+  });
+
+  // Item 2 ends at 90, viewport 60, with 20px padding below: 90 - 60 + 20 = 50
+  expect(offset).toBe(50);
+});
+
+test("calculateScrollOffsetForIndex with auto alignment uses padding when scrolling up", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 1,
+    currentScrollTop: 120,
+    align: "auto",
+    padding: { top: 10, bottom: 5 },
+  });
+
+  // Item 1 starts at 30, scrolling up uses top padding: 30 - 10 = 20
+  expect(offset).toBe(20);
+});
+
+test("calculateScrollOffsetForIndex with auto alignment uses padding when scrolling down", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 4,
+    currentScrollTop: 0,
+    align: "auto",
+    padding: { top: 10, bottom: 15 },
+  });
+
+  // Item 4 ends at 150, viewport 60, scrolling down uses bottom padding: 150 - 60 + 15 = 105
+  expect(offset).toBe(105);
+});
+
+test("calculateScrollOffsetForIndex with padding clamps to bounds", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 0,
+    currentScrollTop: 100,
+    align: "start",
+    padding: 20,
+  });
+
+  // Item 0 starts at 0, with 20px padding: 0 - 20 = -20, clamped to 0
+  expect(offset).toBe(0);
+});
+
+// calculateStickyRows tests
+
+test("calculateStickyRows returns empty array when no rows are sticky", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 20, start: 0, end: 20 },
+    { index: 1, size: 20, start: 20, end: 40 },
+  ];
+
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 0,
+    isStickyRow: () => false,
+  });
+
+  expect(result).toEqual([]);
+});
+
+test("calculateStickyRows returns empty array when scrolled above first sticky row", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 20, start: 0, end: 20 },
+    { index: 1, size: 24, start: 20, end: 44 },
+    { index: 2, size: 20, start: 44, end: 64 },
+  ];
+
+  // Only row 1 is sticky, but we haven't scrolled past it yet
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 10, // Still above row 1 which starts at 20
+    isStickyRow: (index) => index === 1,
+  });
+
+  expect(result).toEqual([]);
+});
+
+test("calculateStickyRows shows first sticky row at scrollTop 0", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 24, start: 0, end: 24 },
+    { index: 1, size: 20, start: 24, end: 44 },
+  ];
+
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 0,
+    isStickyRow: (index) => index === 0,
+  });
+
+  expect(result).toEqual([{ index: 0, stickyTop: 0 }]);
+});
+
+test("calculateStickyRows keeps sticky row at top while scrolling within section", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 24, start: 0, end: 24 },
+    { index: 1, size: 20, start: 24, end: 44 },
+    { index: 2, size: 20, start: 44, end: 64 },
+    { index: 3, size: 24, start: 64, end: 88 },
+  ];
+
+  const isStickyRow = (index: number) => index === 0 || index === 3;
+
+  // Scrolling within the first section (before row 3 approaches)
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 30,
+    isStickyRow,
+  });
+
+  expect(result).toEqual([{ index: 0, stickyTop: 0 }]);
+});
+
+test("calculateStickyRows pushes current sticky row up as next approaches", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 24, start: 0, end: 24 },
+    { index: 1, size: 20, start: 24, end: 44 },
+    { index: 2, size: 24, start: 44, end: 68 },
+  ];
+
+  const isStickyRow = (index: number) => index === 0 || index === 2;
+
+  // Row 0 has size 24, row 2 starts at 44
+  // Push starts when scrollTop + 24 > 44, i.e., scrollTop > 20
+  // At scrollTop 30: pushDistance = 30 + 24 - 44 = 10
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 30,
+    isStickyRow,
+  });
+
+  expect(result).toEqual([{ index: 0, stickyTop: -10 }]);
+});
+
+test("calculateStickyRows transitions to next sticky row when fully pushed out", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 24, start: 0, end: 24 },
+    { index: 1, size: 20, start: 24, end: 44 },
+    { index: 2, size: 24, start: 44, end: 68 },
+  ];
+
+  const isStickyRow = (index: number) => index === 0 || index === 2;
+
+  // At scrollTop 44, row 2 takes over
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 44,
+    isStickyRow,
+  });
+
+  expect(result).toEqual([{ index: 2, stickyTop: 0 }]);
+});
+
+test("calculateStickyRows handles multiple sticky rows in sequence", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 30, start: 0, end: 30 },
+    { index: 1, size: 20, start: 30, end: 50 },
+    { index: 2, size: 30, start: 50, end: 80 },
+    { index: 3, size: 20, start: 80, end: 100 },
+    { index: 4, size: 30, start: 100, end: 130 },
+  ];
+
+  const isStickyRow = (index: number) => index === 0 || index === 2 || index === 4;
+
+  // Scrolled past row 2, row 2 is now sticky
+  const result1 = calculateStickyRows({
+    measurements,
+    scrollTop: 60,
+    isStickyRow,
+  });
+  expect(result1).toEqual([{ index: 2, stickyTop: 0 }]);
+
+  // Scrolled past row 4, row 4 is now sticky
+  const result2 = calculateStickyRows({
+    measurements,
+    scrollTop: 100,
+    isStickyRow,
+  });
+  expect(result2).toEqual([{ index: 4, stickyTop: 0 }]);
+});
+
+test("calculateStickyRows handles last sticky row without next", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 24, start: 0, end: 24 },
+    { index: 1, size: 20, start: 24, end: 44 },
+    { index: 2, size: 20, start: 44, end: 64 },
+  ];
+
+  // Only row 0 is sticky - no next sticky row to push it
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 40,
+    isStickyRow: (index) => index === 0,
+  });
+
+  expect(result).toEqual([{ index: 0, stickyTop: 0 }]);
+});
+
+test("calculateStickyRows handles empty measurements", () => {
+  const result = calculateStickyRows({
+    measurements: [],
+    scrollTop: 0,
+    isStickyRow: () => true,
+  });
+
+  expect(result).toEqual([]);
+});
+
+test("calculateStickyRows push distance calculation at boundary", () => {
+  const measurements: ItemMeasurement[] = [
+    { index: 0, size: 24, start: 0, end: 24 },
+    { index: 1, size: 20, start: 24, end: 44 },
+    { index: 2, size: 24, start: 44, end: 68 },
+  ];
+
+  const isStickyRow = (index: number) => index === 0 || index === 2;
+
+  // At scrollTop 20: pushDistance = 20 + 24 - 44 = 0 (no push yet)
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 20,
+    isStickyRow,
+  });
+
+  expect(result).toEqual([{ index: 0, stickyTop: 0 }]);
+});

package/src/components/__tests__/Virtualized.test.tsx

@@ -1,7 +1,7 @@
 import { act, render } from "@testing-library/react";
 import { expect, test } from "bun:test";
 import React from "react";
-import { Virtualized } from "../Virtualized";
+import { calculateStickyRows, Virtualized } from "../Virtualized";
 
 test("virtualized window updates visible rows when scrolling", () => {
   const items = Array.from({ length: 100 }, (_, index) => `Row ${index + 1}`);
@@ -43,6 +43,7 @@ test("accounts for padding and gap", () => {
   );
 
   const scroller = container.firstChild as HTMLDivElement;
+  // No sticky rows, so first child is inner (totalContent)
   const inner = scroller.firstChild as HTMLDivElement;
   const firstRow = inner.firstChild as HTMLDivElement;
   const secondRow = firstRow.nextSibling as HTMLDivElement;
@@ -83,3 +84,130 @@ test("supports ScrollArea as the scroller", () => {
   expect(queryByTestId("scroll-row-0")).toBeNull();
   expect(getByTestId("scroll-row-10")).toBeTruthy();
 });
+
+test("calculateStickyRows returns empty array when no rows are sticky", () => {
+  const measurements = [
+    { index: 0, size: 20, start: 0, end: 20 },
+    { index: 1, size: 20, start: 20, end: 40 },
+  ];
+
+  const result = calculateStickyRows({
+    measurements,
+    scrollTop: 0,
+    isStickyRow: () => false,
+  });
+
+  expect(result).toEqual([]);
+});
+
+test("calculateStickyRows shows only current sticky row", () => {
+  const measurements = [
+    { index: 0, size: 24, start: 0, end: 24 },
+    { index: 1, size: 20, start: 24, end: 44 },
+    { index: 2, size: 24, start: 44, end: 68 },
+    { index: 3, size: 20, start: 68, end: 88 },
+  ];
+
+  // Row 0 and 2 are sticky (like section headers)
+  const isStickyRow = (index: number) => index === 0 || index === 2;
+
+  // At scrollTop 0, row 0 is at its natural position (start=0)
+  const result1 = calculateStickyRows({
+    measurements,
+    scrollTop: 0,
+    isStickyRow,
+  });
+  expect(result1).toEqual([{ index: 0, stickyTop: 0 }]);
+
+  // At scrollTop 10, row 0 still sticky at top
+  const result2 = calculateStickyRows({
+    measurements,
+    scrollTop: 10,
+    isStickyRow,
+  });
+  expect(result2).toEqual([{ index: 0, stickyTop: 0 }]);
+
+  // At scrollTop 44, row 2 becomes the current sticky (replaces row 0)
+  const result3 = calculateStickyRows({
+    measurements,
+    scrollTop: 44,
+    isStickyRow,
+  });
+  expect(result3).toEqual([{ index: 2, stickyTop: 0 }]);
+});
+
+test("calculateStickyRows pushes current sticky up during transition", () => {
+  const measurements = [
+    { index: 0, size: 24, start: 0, end: 24 },
+    { index: 1, size: 20, start: 24, end: 44 },
+    { index: 2, size: 24, start: 44, end: 68 },
+  ];
+
+  const isStickyRow = (index: number) => index === 0 || index === 2;
+
+  // Row 2 starts at 44, row 0 has size 24
+  // Push starts when scrollTop + 24 > 44, i.e., scrollTop > 20
+
+  // At scrollTop 20, no push yet (20 + 24 = 44, exactly at row 2 start)
+  const result1 = calculateStickyRows({
+    measurements,
+    scrollTop: 20,
+    isStickyRow,
+  });
+  expect(result1).toEqual([{ index: 0, stickyTop: 0 }]);
+
+  // At scrollTop 30, row 0 is pushed up by 10px (30 + 24 - 44 = 10)
+  const result2 = calculateStickyRows({
+    measurements,
+    scrollTop: 30,
+    isStickyRow,
+  });
+  expect(result2).toEqual([{ index: 0, stickyTop: -10 }]);
+
+  // At scrollTop 44, row 2 takes over completely
+  const result3 = calculateStickyRows({
+    measurements,
+    scrollTop: 44,
+    isStickyRow,
+  });
+  expect(result3).toEqual([{ index: 2, stickyTop: 0 }]);
+});
+
+test("sticky rows render in overlay when scrolled", () => {
+  const items = Array.from({ length: 20 }, (_, index) => `Row ${index}`);
+  const isStickyRow = (index: number) => index % 5 === 0; // 0, 5, 10, 15 are sticky
+
+  const { container, getAllByTestId, queryAllByTestId } = render(
+    <Virtualized
+      height={100}
+      itemCount={items.length}
+      getItemHeight={() => 20}
+      isStickyRow={isStickyRow}
+      renderItem={(index) => (
+        <div data-testid={`row-${index}`}>{items[index]}</div>
+      )}
+    />
+  );
+
+  const scroller = container.firstChild as HTMLDivElement;
+
+  // Initially row-0 should appear twice (once in content, once in sticky overlay)
+  expect(getAllByTestId("row-0")).toHaveLength(2);
+
+  // Scroll down past row 5 (starts at 100)
+  act(() => {
+    scroller.scrollTop = 120;
+    scroller.dispatchEvent(new Event("scroll"));
+  });
+
+  // Row 5 should now be the sticky row (only one sticky at a time)
+  // Row 5 appears in visible range AND in sticky overlay
+  const row5Elements = getAllByTestId("row-5");
+  expect(row5Elements.length).toBeGreaterThanOrEqual(1);
+
+  // Row 0 should NOT be in sticky overlay anymore (replaced by row 5)
+  // It may still be in visible range depending on overscan
+  const row0Elements = queryAllByTestId("row-0");
+  // Row 0 is at position 0-20, with scrollTop 120 and overscan 2, it's not visible
+  expect(row0Elements.length).toBeLessThanOrEqual(1);
+});

package/src/components/ai-assistant/AIAssistantLayout.tsx

@@ -32,13 +32,14 @@ type AIAssistantInputProps = {
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onSubmitClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-  disabled: boolean;
+  disabled?: boolean;
+  submitDisabled?: boolean;
 };
 
 export const AIAssistantInput = forwardRef<
   HTMLDivElement,
   AIAssistantInputProps
->(({ value, onChange, onSubmitClick, onKeyDown, disabled }, ref) => (
+>(({ value, onChange, onSubmitClick, onKeyDown, disabled, submitDisabled }, ref) => (
   <TextAreaRow
     autoResize
     autoFocus
@@ -53,7 +54,7 @@ export const AIAssistantInput = forwardRef<
       <IconButton
         iconName="ArrowUpIcon"
         onClick={onSubmitClick}
-        disabled={!value.trim() || disabled}
+        disabled={!value.trim() || submitDisabled || disabled}
         className="n-h-8 n-w-8 n-z-20 n-rounded-full"
         size={20}
         color={cssVars.colors.text}
@@ -90,14 +91,18 @@ export const AIAssistantLayout = forwardRef<
     ref
   ) => {
     return (
-      <div className={cx("n-flex n-flex-col n-flex-1", className)} style={style}>
+      <div className={cx("n-flex n-flex-col n-flex-1 n-min-h-0", className)} style={style}>
         <div className="n-flex-1 n-min-h-0 n-overflow-auto" ref={ref}>
-          <div className="n-flex n-flex-col n-gap-2 n-pb-4 n-pt-1">
+          <div className="n-flex n-flex-col n-gap-4 n-p-6 n-max-w-3xl n-mx-auto">
             {renderMessages()}
             {isLoading ? renderLoadingIndicator?.() : null}
           </div>
         </div>
-        <div className="n-border-t n-border-divider n-pt-1 n-px-1">{renderInput()}</div>
+        <div className="n-border-t n-border-divider n-px-6 n-py-4">
+          <div className="n-max-w-3xl n-mx-auto">
+            {renderInput()}
+          </div>
+        </div>
       </div>
     );
   }

package/src/components/internal/Menu.tsx

@@ -108,6 +108,10 @@ export type PopoverMenuItem = BaseMenuItem & {
   content: ReactNode | ((props: { close: () => void }) => ReactNode);
   shortcut?: string;
   tooltip?: ReactNode;
+  /** Class name applied to the popover container (not used for dialogs on small screens) */
+  popoverClassName?: string;
+  /** Extra props to pass to the trigger button (e.g., data attributes) */
+  triggerProps?: Record<string, unknown>;
 };
 
 export type NonSelectableMenuItem<T extends string> =

package/src/components/listView/ListViewEditableRowTitle.tsx

@@ -68,7 +68,7 @@ export const ListViewEditableRowTitle = memo(function ListViewEditableRowTitle({
       onSubmit={onSubmitEditing}
       allowSubmittingWithSameValue
       className={cx(
-        "-n-mx-1.5 -n-my-1 n-bg-listview-editing-background",
+        "-n-mx-input-padding-x -n-my-1 n-bg-listview-editing-background",
         className
       )}
       onKeyDown={onKeyDown}

package/src/components/listView/ListViewRoot.tsx

@@ -302,7 +302,11 @@ export const ListViewRoot = memoGeneric(
       );
 
     const withScrollable = (children: ReactNode) =>
-      scrollable ? <ScrollArea>{children}</ScrollArea> : children;
+      scrollable ? (
+        <ScrollArea className="n-flex-1 n-min-h-0">{children}</ScrollArea>
+      ) : (
+        children
+      );
 
     const getItemHeight = useCallback(
       (index: number) => {