@adecore/ui 0.53.3 → 0.54.1

package/dist/menu/parts.js

@@ -1,17 +1,19 @@
 import { c as _c } from "react/compiler-runtime";
-import { createContext, useContext } from 'react';
-import clsx from 'clsx';
-import { Check, ChevronRight } from 'lucide-react';
 import { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { Separator as BaseSeparator } from '@base-ui/react/separator';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { Check, ChevronRight } from 'lucide-react';
+import { createContext, useContext, useState } from 'react';
 import { withClass } from '../class-name.js';
 import { Icon } from "../Icon.js";
-import { Tooltip } from "../Tooltip.js";
+import { mergeRefs } from '../merge-refs.js';
 import { splitPlacement } from '../placement.js';
 import { renderPositioner } from '../popup-layer.js';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from "../Tooltip.js";
+import { useOverlayScrollbars } from "../useOverlayScrollbars.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MenuKindContext = createContext('menu');
 /* A context menu opens at the pointer, which its positioner already knows. A submenu is pulled up by the popup's padding so its first row lines up with the row that opened it. */
 const PLACEMENT = {
@@ -86,41 +88,54 @@ export function MenuSubmenuRoot(props) {
 export const MenuTrigger = BaseMenu.Trigger;
 export const ContextMenuTrigger = BaseContextMenu.Trigger;
 export function MenuPopup(t0) {
-  const $ = _c(12);
+  const $ = _c(16);
   const {
     className,
+    ref,
     ...props
   } = t0;
   const defaults = PLACEMENT[useContext(MenuKindContext)];
   const [placement, popupProps] = splitPlacement(props);
+  const [popup, setPopup] = useState(null);
+  const scrollbars = useOverlayScrollbars(popup);
   const t1 = placement.side ?? defaults.side;
   const t2 = placement.align ?? defaults.align;
   const t3 = placement.sideOffset ?? defaults.sideOffset;
   const t4 = placement.alignOffset ?? defaults.alignOffset;
   let t5;
-  if ($[0] !== className) {
-    t5 = withClass("menu-popup", className);
-    $[0] = className;
+  if ($[0] !== ref) {
+    t5 = mergeRefs(setPopup, ref);
+    $[0] = ref;
     $[1] = t5;
   } else {
     t5 = $[1];
   }
   let t6;
-  if ($[2] !== popupProps || $[3] !== t5) {
-    t6 = /*#__PURE__*/_jsx(BaseMenu.Popup, {
-      className: t5,
+  if ($[2] !== className) {
+    t6 = withClass("menu-popup", className);
+    $[2] = className;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  let t7;
+  if ($[4] !== popupProps || $[5] !== t5 || $[6] !== t6) {
+    t7 = /*#__PURE__*/_jsx(BaseMenu.Popup, {
+      ref: t5,
+      className: t6,
       ...popupProps
     });
-    $[2] = popupProps;
-    $[3] = t5;
-    $[4] = t6;
+    $[4] = popupProps;
+    $[5] = t5;
+    $[6] = t6;
+    $[7] = t7;
   } else {
-    t6 = $[4];
+    t7 = $[7];
   }
-  let t7;
-  if ($[5] !== placement || $[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== t4 || $[10] !== t6) {
-    t7 = /*#__PURE__*/_jsx(BaseMenu.Portal, {
-      children: /*#__PURE__*/_jsx(BaseMenu.Positioner, {
+  let t8;
+  if ($[8] !== placement || $[9] !== scrollbars || $[10] !== t1 || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== t7) {
+    t8 = /*#__PURE__*/_jsx(BaseMenu.Portal, {
+      children: /*#__PURE__*/_jsxs(BaseMenu.Positioner, {
         className: "popup-positioner",
         render: renderPositioner,
         ...placement,
@@ -128,20 +143,21 @@ export function MenuPopup(t0) {
         align: t2,
         sideOffset: t3,
         alignOffset: t4,
-        children: t6
+        children: [t7, scrollbars]
       })
     });
-    $[5] = placement;
-    $[6] = t1;
-    $[7] = t2;
-    $[8] = t3;
-    $[9] = t4;
-    $[10] = t6;
-    $[11] = t7;
+    $[8] = placement;
+    $[9] = scrollbars;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t7;
+    $[15] = t8;
   } else {
-    t7 = $[11];
+    t8 = $[15];
   }
-  return t7;
+  return t8;
 }
 export function MenuItem(t0) {
   const $ = _c(10);

package/dist/popover/parts.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps } from 'react';
 import { Popover as BasePopover } from '@base-ui/react/popover';
 import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import { type ComponentProps } from 'react';
 import { type PlacementKey } from '../placement.ts';
 declare const POPUP_VARIANT: {
     readonly menu: 'menu-popup';
@@ -17,11 +17,11 @@ export declare const PopoverDescription: import("react").ForwardRefExoticCompone
 export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> & Placement & {
     variant?: PopupVariant;
 };
-export declare function PopoverPopup({ variant, side, align, sideOffset, className, ...props }: PopoverPopupProps): import("react").JSX.Element;
+export declare function PopoverPopup({ variant, side, align, sideOffset, className, ref, ...props }: PopoverPopupProps): import("react").JSX.Element;
 export declare const PreviewCardRoot: <Payload>(props: BasePreviewCard.Root.Props<Payload>) => React.JSX.Element;
 export declare const PreviewCardTrigger: BasePreviewCard.Trigger;
 export type PreviewCardPopupProps = ComponentProps<typeof BasePreviewCard.Popup> & Placement & {
     variant?: PopupVariant;
 };
-export declare function PreviewCardPopup({ variant, side, align, sideOffset, className, ...props }: PreviewCardPopupProps): import("react").JSX.Element;
+export declare function PreviewCardPopup({ variant, side, align, sideOffset, className, ref, ...props }: PreviewCardPopupProps): import("react").JSX.Element;
 export {};

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;