@adecore/ui 0.53.2 → 0.54.0

package/dist/popover/parts.js

@@ -1,11 +1,14 @@
 import { c as _c } from "react/compiler-runtime";
 import { Popover as BasePopover } from '@base-ui/react/popover';
 import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { useState } from 'react';
 import { withClass } from '../class-name.js';
+import { mergeRefs } from '../merge-refs.js';
 import { splitPlacement } from '../placement.js';
 import { renderPositioner } from '../popup-layer.js';
+import { useOverlayScrollbars } from "../useOverlayScrollbars.js";
 /* `picker` is a card whose content runs to its edges, `plain` leaves the surface to the caller. */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const POPUP_VARIANT = {
   menu: 'menu-popup',
   picker: 'picker-popup',
@@ -17,9 +20,10 @@ export const PopoverClose = BasePopover.Close;
 export const PopoverTitle = BasePopover.Title;
 export const PopoverDescription = BasePopover.Description;
 export function PopoverPopup(t0) {
-  const $ = _c(19);
+  const $ = _c(24);
   let align;
   let className;
+  let ref;
   let side;
   let sideOffset;
   let t1;
@@ -31,9 +35,11 @@ export function PopoverPopup(t0) {
       align: t4,
       sideOffset: t5,
       className: t6,
+      ref: t7,
       ...props
     } = t0;
     className = t6;
+    ref = t7;
     variant = t2 === undefined ? "menu" : t2;
     side = t3 === undefined ? "bottom" : t3;
     align = t4 === undefined ? "start" : t4;
@@ -42,72 +48,88 @@ export function PopoverPopup(t0) {
     $[0] = t0;
     $[1] = align;
     $[2] = className;
-    $[3] = side;
-    $[4] = sideOffset;
-    $[5] = t1;
-    $[6] = variant;
+    $[3] = ref;
+    $[4] = side;
+    $[5] = sideOffset;
+    $[6] = t1;
+    $[7] = variant;
   } else {
     align = $[1];
     className = $[2];
-    side = $[3];
-    sideOffset = $[4];
-    t1 = $[5];
-    variant = $[6];
+    ref = $[3];
+    side = $[4];
+    sideOffset = $[5];
+    t1 = $[6];
+    variant = $[7];
   }
   const [placement, popupProps] = t1;
-  const t2 = POPUP_VARIANT[variant];
-  let t3;
-  if ($[7] !== className || $[8] !== t2) {
-    t3 = withClass(t2, className);
-    $[7] = className;
-    $[8] = t2;
-    $[9] = t3;
+  const [popup, setPopup] = useState(null);
+  const scrollbars = useOverlayScrollbars(popup);
+  let t2;
+  if ($[8] !== ref) {
+    t2 = mergeRefs(setPopup, ref);
+    $[8] = ref;
+    $[9] = t2;
   } else {
-    t3 = $[9];
+    t2 = $[9];
   }
+  const t3 = POPUP_VARIANT[variant];
   let t4;
-  if ($[10] !== popupProps || $[11] !== t3) {
-    t4 = /*#__PURE__*/_jsx(BasePopover.Popup, {
-      className: t3,
-      ...popupProps
-    });
-    $[10] = popupProps;
+  if ($[10] !== className || $[11] !== t3) {
+    t4 = withClass(t3, className);
+    $[10] = className;
     $[11] = t3;
     $[12] = t4;
   } else {
     t4 = $[12];
   }
   let t5;
-  if ($[13] !== align || $[14] !== placement || $[15] !== side || $[16] !== sideOffset || $[17] !== t4) {
-    t5 = /*#__PURE__*/_jsx(BasePopover.Portal, {
-      children: /*#__PURE__*/_jsx(BasePopover.Positioner, {
+  if ($[13] !== popupProps || $[14] !== t2 || $[15] !== t4) {
+    t5 = /*#__PURE__*/_jsx(BasePopover.Popup, {
+      ref: t2,
+      className: t4,
+      ...popupProps
+    });
+    $[13] = popupProps;
+    $[14] = t2;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== align || $[18] !== placement || $[19] !== scrollbars || $[20] !== side || $[21] !== sideOffset || $[22] !== t5) {
+    t6 = /*#__PURE__*/_jsx(BasePopover.Portal, {
+      children: /*#__PURE__*/_jsxs(BasePopover.Positioner, {
         className: "popup-positioner",
         render: renderPositioner,
         ...placement,
         side: side,
         align: align,
         sideOffset: sideOffset,
-        children: t4
+        children: [t5, scrollbars]
       })
     });
-    $[13] = align;
-    $[14] = placement;
-    $[15] = side;
-    $[16] = sideOffset;
-    $[17] = t4;
-    $[18] = t5;
+    $[17] = align;
+    $[18] = placement;
+    $[19] = scrollbars;
+    $[20] = side;
+    $[21] = sideOffset;
+    $[22] = t5;
+    $[23] = t6;
   } else {
-    t5 = $[18];
+    t6 = $[23];
   }
-  return t5;
+  return t6;
 }
 export const PreviewCardRoot = BasePreviewCard.Root;
 export const PreviewCardTrigger = BasePreviewCard.Trigger;
 /* A card that opens while the pointer rests on its trigger, drawn like a popover. */
 export function PreviewCardPopup(t0) {
-  const $ = _c(19);
+  const $ = _c(24);
   let align;
   let className;
+  let ref;
   let side;
   let sideOffset;
   let t1;
@@ -119,9 +141,11 @@ export function PreviewCardPopup(t0) {
       align: t4,
       sideOffset: t5,
       className: t6,
+      ref: t7,
       ...props
     } = t0;
     className = t6;
+    ref = t7;
     variant = t2 === undefined ? "menu" : t2;
     side = t3 === undefined ? "bottom" : t3;
     align = t4 === undefined ? "start" : t4;
@@ -130,61 +154,76 @@ export function PreviewCardPopup(t0) {
     $[0] = t0;
     $[1] = align;
     $[2] = className;
-    $[3] = side;
-    $[4] = sideOffset;
-    $[5] = t1;
-    $[6] = variant;
+    $[3] = ref;
+    $[4] = side;
+    $[5] = sideOffset;
+    $[6] = t1;
+    $[7] = variant;
   } else {
     align = $[1];
     className = $[2];
-    side = $[3];
-    sideOffset = $[4];
-    t1 = $[5];
-    variant = $[6];
+    ref = $[3];
+    side = $[4];
+    sideOffset = $[5];
+    t1 = $[6];
+    variant = $[7];
   }
   const [placement, popupProps] = t1;
-  const t2 = POPUP_VARIANT[variant];
-  let t3;
-  if ($[7] !== className || $[8] !== t2) {
-    t3 = withClass(t2, className);
-    $[7] = className;
-    $[8] = t2;
-    $[9] = t3;
+  const [popup, setPopup] = useState(null);
+  const scrollbars = useOverlayScrollbars(popup);
+  let t2;
+  if ($[8] !== ref) {
+    t2 = mergeRefs(setPopup, ref);
+    $[8] = ref;
+    $[9] = t2;
   } else {
-    t3 = $[9];
+    t2 = $[9];
   }
+  const t3 = POPUP_VARIANT[variant];
   let t4;
-  if ($[10] !== popupProps || $[11] !== t3) {
-    t4 = /*#__PURE__*/_jsx(BasePreviewCard.Popup, {
-      className: t3,
-      ...popupProps
-    });
-    $[10] = popupProps;
+  if ($[10] !== className || $[11] !== t3) {
+    t4 = withClass(t3, className);
+    $[10] = className;
     $[11] = t3;
     $[12] = t4;
   } else {
     t4 = $[12];
   }
   let t5;
-  if ($[13] !== align || $[14] !== placement || $[15] !== side || $[16] !== sideOffset || $[17] !== t4) {
-    t5 = /*#__PURE__*/_jsx(BasePreviewCard.Portal, {
-      children: /*#__PURE__*/_jsx(BasePreviewCard.Positioner, {
+  if ($[13] !== popupProps || $[14] !== t2 || $[15] !== t4) {
+    t5 = /*#__PURE__*/_jsx(BasePreviewCard.Popup, {
+      ref: t2,
+      className: t4,
+      ...popupProps
+    });
+    $[13] = popupProps;
+    $[14] = t2;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== align || $[18] !== placement || $[19] !== scrollbars || $[20] !== side || $[21] !== sideOffset || $[22] !== t5) {
+    t6 = /*#__PURE__*/_jsx(BasePreviewCard.Portal, {
+      children: /*#__PURE__*/_jsxs(BasePreviewCard.Positioner, {
         className: "z-(--z-popup)",
         ...placement,
         side: side,
         align: align,
         sideOffset: sideOffset,
-        children: t4
+        children: [t5, scrollbars]
       })
     });
-    $[13] = align;
-    $[14] = placement;
-    $[15] = side;
-    $[16] = sideOffset;
-    $[17] = t4;
-    $[18] = t5;
+    $[17] = align;
+    $[18] = placement;
+    $[19] = scrollbars;
+    $[20] = side;
+    $[21] = sideOffset;
+    $[22] = t5;
+    $[23] = t6;
   } else {
-    t5 = $[18];
+    t6 = $[23];
   }
-  return t5;
+  return t6;
 }

package/dist/project-switcher-row.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { MoreHorizontal } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import * as Menu from './menu/index.parts.js';
 import { Tooltip } from "./Tooltip.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/scrollbar-geometry.d.ts

@@ -0,0 +1,15 @@
+export declare const MIN_THUMB = 24;
+export declare const PAGE_SHARE = 0.9;
+export interface ScrollMetrics {
+    readonly track: number;
+    readonly view: number;
+    readonly content: number;
+}
+export interface Thumb {
+    readonly size: number;
+    readonly offset: number;
+}
+export declare function overflows(view: number, content: number): boolean;
+export declare function thumbOf({ track, view, content }: ScrollMetrics, position: number): Thumb;
+export declare function scrollAfterDrag(metrics: ScrollMetrics, start: number, moved: number): number;
+export declare function pageToward(pointer: number, thumbStart: number, thumbEnd: number, view: number): number;

package/dist/scrollbar-geometry.js

@@ -0,0 +1,48 @@
+/* A thumb never gets shorter than this, so a long list keeps one a pointer can grab. */
+export const MIN_THUMB = 24;
+/* A press on the track moves this share of the visible length, so a line of the old view stays in sight. */
+export const PAGE_SHARE = 0.9;
+/* Whether an axis has anything to scroll; a pixel of rounding is not worth a bar. */
+export function overflows(view, content) {
+  return content - view > 1;
+}
+/* The thumb's length and its distance from the start of the track, in whole pixels. */
+export function thumbOf({
+  track,
+  view,
+  content
+}, position) {
+  const range = content - view;
+  if (range <= 0 || track <= 0) {
+    return {
+      size: Math.max(0, Math.round(track)),
+      offset: 0
+    };
+  }
+  const size = Math.min(Math.round(track), Math.max(MIN_THUMB, Math.round(track * view / content)));
+  const progress = Math.min(1, Math.max(0, position / range));
+  return {
+    size,
+    offset: Math.round((track - size) * progress)
+  };
+}
+/* The scroll position after the thumb moved `moved` pixels from where a drag started. */
+export function scrollAfterDrag(metrics, start, moved) {
+  const range = metrics.content - metrics.view;
+  const free = metrics.track - thumbOf(metrics, start).size;
+  if (range <= 0 || free <= 0) {
+    return start;
+  }
+  return Math.min(range, Math.max(0, start + moved * range / free));
+}
+/* How far a press on the track at `pointer` scrolls: a page toward the pointer, nothing on the thumb itself. */
+export function pageToward(pointer, thumbStart, thumbEnd, view) {
+  const page = Math.round(view * PAGE_SHARE);
+  if (pointer < thumbStart) {
+    return -page;
+  }
+  if (pointer > thumbEnd) {
+    return page;
+  }
+  return 0;
+}

package/dist/settings/MasterDetail.js

@@ -1,5 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
+import { ScrollArea } from "../ScrollArea.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LIST_WIDTHS = {
   280: 'w-70',
@@ -8,7 +9,7 @@ const LIST_WIDTHS = {
 };
 /* Its section must be `split`, so the dialog hands the pane its whole height instead of a padded scrolling column. */
 export function MasterDetail(t0) {
-  const $ = _c(15);
+  const $ = _c(16);
   const {
     list,
     listWidth,
@@ -25,59 +26,68 @@ export function MasterDetail(t0) {
   } else {
     t1 = $[1];
   }
-  const t2 = LIST_WIDTHS[listWidth];
-  let t3;
-  if ($[2] !== t2) {
-    t3 = clsx("flex shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-border p-2 max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b", t2);
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/_jsx("nav", {});
     $[2] = t2;
-    $[3] = t3;
   } else {
-    t3 = $[3];
+    t2 = $[2];
   }
+  const t3 = LIST_WIDTHS[listWidth];
   let t4;
-  if ($[4] !== list || $[5] !== listLabel || $[6] !== t3) {
-    t4 = /*#__PURE__*/_jsx("nav", {
+  if ($[3] !== t3) {
+    t4 = clsx("shrink-0 border-r border-border max-[640px]:max-h-60 max-[640px]:w-auto max-[640px]:border-r-0 max-[640px]:border-b", t3);
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== list || $[6] !== listLabel || $[7] !== t4) {
+    t5 = /*#__PURE__*/_jsx(ScrollArea, {
+      render: t2,
       "aria-label": listLabel,
-      className: t3,
+      className: t4,
+      viewportClassName: "flex flex-col gap-0.5 p-2",
       children: list
     });
-    $[4] = list;
-    $[5] = listLabel;
-    $[6] = t3;
+    $[5] = list;
+    $[6] = listLabel;
     $[7] = t4;
+    $[8] = t5;
   } else {
-    t4 = $[7];
+    t5 = $[8];
   }
-  let t5;
-  if ($[8] !== detail) {
-    t5 = /*#__PURE__*/_jsx("div", {
-      className: "min-h-0 min-w-0 grow overflow-y-auto",
+  let t6;
+  if ($[9] !== detail) {
+    t6 = /*#__PURE__*/_jsx(ScrollArea, {
+      className: "grow",
       children: /*#__PURE__*/_jsx("div", {
         className: "flex min-w-0 flex-col gap-7 px-8 pt-6 pb-10 max-[960px]:px-4",
         children: detail
       })
     });
-    $[8] = detail;
-    $[9] = t5;
+    $[9] = detail;
+    $[10] = t6;
   } else {
-    t5 = $[9];
+    t6 = $[10];
   }
-  let t6;
-  if ($[10] !== ref || $[11] !== t1 || $[12] !== t4 || $[13] !== t5) {
-    t6 = /*#__PURE__*/_jsxs("div", {
+  let t7;
+  if ($[11] !== ref || $[12] !== t1 || $[13] !== t5 || $[14] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
       ref: ref,
       className: t1,
-      children: [t4, t5]
+      children: [t5, t6]
     });
-    $[10] = ref;
-    $[11] = t1;
-    $[12] = t4;
+    $[11] = ref;
+    $[12] = t1;
     $[13] = t5;
     $[14] = t6;
+    $[15] = t7;
   } else {
-    t6 = $[14];
+    t7 = $[15];
   }
-  return t6;
+  return t7;
 }
 export function MasterItem(t0) {
   const $ = _c(9);

package/dist/settings/SettingsDialog.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentType, type ReactNode, type Ref } from 'react';
 import { type LucideIcon } from 'lucide-react';
+import { type ComponentType, type ReactNode, type Ref } from 'react';
 export interface SettingsSectionEntry {
     id: string;
     icon: LucideIcon;

package/dist/settings/SettingsDialog.js

@@ -1,20 +1,34 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { Tabs } from '@base-ui/react/tabs';
+import clsx from 'clsx';
 import { Search, X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { CloseButton } from "../CloseButton.js";
 import { DialogDescription, DialogPopup, DialogRoot, DialogTitle } from "../dialog/parts.js";
 import { ErrorBoundary } from "../ErrorBoundary.js";
 import { Icon } from "../Icon.js";
 import { IconButton } from "../IconButton.js";
-import { LazyBoundary } from "../LazyBoundary.js";
 import { Input } from "../Input.js";
+import { LazyBoundary } from "../LazyBoundary.js";
+import { ScrollArea } from "../ScrollArea.js";
 import { Select } from "../Select.js";
 import { SettingsTargetContext } from './target.js';
-/* How far a pane with a hero scrolls before the title bar over it is filled in. */
+/* A pane that is not split scrolls as one column: the panel's own props land on the viewport, which stays the tab panel. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function renderScrollingPanel({
+  ref,
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(ScrollArea, {
+    ref: ref,
+    className: "min-h-0 min-w-0 grow",
+    viewportClassName: className,
+    ...props
+  });
+}
+/* How far a pane with a hero scrolls before the title bar over it is filled in. */
 const BAR_FILL_DISTANCE = 70;
 const NAV_ITEM = 'flex h-8 min-w-0 shrink-0 items-center gap-2.5 rounded-md px-2.5 text-sm focus-visible:-outline-offset-2 text-text-muted hover:bg-surface-hover hover:text-text data-active:bg-surface-active data-active:text-text';
 function NavTab(t0) {
@@ -121,9 +135,9 @@ function SettingsNav(t0) {
   }
   let t5;
   if ($[6] !== t4) {
-    t5 = /*#__PURE__*/_jsx("div", {
-      ref: list,
-      className: "scroll-fade-y flex min-h-0 flex-col gap-3.5 overflow-y-auto",
+    t5 = /*#__PURE__*/_jsx(ScrollArea, {
+      viewportRef: list,
+      viewportClassName: "scroll-fade-y flex flex-col gap-3.5",
       children: t4
     });
     $[6] = t4;
@@ -349,8 +363,9 @@ function SearchResults({
       })
     });
   }
-  return /*#__PURE__*/_jsx("ul", {
-    className: "flex min-h-0 flex-col gap-0.5 overflow-y-auto",
+  return /*#__PURE__*/_jsx(ScrollArea, {
+    render: /*#__PURE__*/_jsx("ul", {}),
+    viewportClassName: "flex flex-col gap-0.5",
     "aria-label": t('settings.search.results'),
     children: results.map(result => /*#__PURE__*/_jsx("li", {
       children: /*#__PURE__*/_jsxs("button", {
@@ -751,7 +766,8 @@ export function SettingsDialog(t0) {
       return /*#__PURE__*/_jsx(Tabs.Panel, {
         value: entry_2.id,
         keepMounted: false,
-        className: clsx("flex min-h-0 min-w-0 grow flex-col outline-none", !entry_2.split && "gap-7 overflow-y-auto px-8 pb-10 max-[960px]:px-4", !entry_2.split && !Hero && "scroll-fade-top pt-1"),
+        className: clsx("flex min-h-0 min-w-0 grow flex-col outline-none", !entry_2.split && "gap-7 px-8 pb-10 max-[960px]:px-4", !entry_2.split && !Hero && "scroll-fade-top pt-1"),
+        render: entry_2.split ? undefined : renderScrollingPanel,
         onScroll: event => {
           const top = event.currentTarget.scrollTop;
           event.currentTarget.toggleAttribute("data-fade-start", top > 0);

package/dist/settings/SettingsRow.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode, type Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import { type ReactNode, type Ref } from 'react';
 export interface SettingsRowProps {
     label: ReactNode;
     description?: ReactNode;

package/dist/settings/SettingsRow.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useRef } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
 import { Icon } from "../Icon.js";
 import { mergeRefs } from '../merge-refs.js';
 import { useSettingsTarget } from './target.js';

package/dist/settings/SettingsSection.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 export interface SettingsSectionProps {
     title?: string;
     description?: ReactNode;

package/dist/tabs/parts.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import { useRender } from '@base-ui/react/use-render';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 export type TabsValue = BaseTabs.Tab.Value;
 export type TabsVariant = 'line' | 'pill';
 export type TabsRootProps = Omit<ComponentProps<typeof BaseTabs.Root>, 'onValueChange'> & {

package/dist/tabs/parts.js

@@ -1,10 +1,10 @@
 import { c as _c } from "react/compiler-runtime";
-import { Children, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import { ChevronDown, X } from 'lucide-react';
+import { Children, createContext, isValidElement, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tabs as BaseTabs } from '@base-ui/react/tabs';
-import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.js';
 import { formatNumber } from '../format/number.js';
 import { Icon } from "../Icon.js";

package/dist/testing/dedupe.js

@@ -1,6 +1,6 @@
+import { Glob, plugin } from 'bun';
 import { existsSync, readdirSync, readFileSync, realpathSync } from 'node:fs';
 import { dirname, join, sep } from 'node:path';
-import { Glob, plugin } from 'bun';
 /*
  * What `resolve.dedupe` does for Vite, for `bun test` in an app that links a checkout: a second React,
  * i18next or Base UI breaks every hook, word and compound part. Bun has no dedupe and its resolve hook