@adecore/ui 0.53.3 → 0.54.0

package/dist/combobox/parts.js

@@ -1,14 +1,17 @@
 import { c as _c } from "react/compiler-runtime";
+import { Autocomplete } from '@base-ui/react/autocomplete';
 import clsx from 'clsx';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Autocomplete } from '@base-ui/react/autocomplete';
 import { withClass } from '../class-name.js';
 import { fieldControlProps, useFieldControl } from '../field-context.js';
 import { Icon } from "../Icon.js";
 import { Kbd } from "../Kbd.js";
 import { MENU_LABEL } from "../menu/parts.js";
+import { mergeRefs } from '../merge-refs.js';
 import { splitPlacement } from '../placement.js';
 import { renderPositioner } from '../popup-layer.js';
+import { useOverlayScrollbars } from "../useOverlayScrollbars.js";
 /* It takes no room while it has nothing to say. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LIST_NOTE = 'text-center text-xs text-text-faint not-empty:px-3 not-empty:py-4';
@@ -172,9 +175,10 @@ export function ComboboxInput(t0) {
   return t15;
 }
 export function ComboboxPopup(t0) {
-  const $ = _c(17);
+  const $ = _c(22);
   let align;
   let className;
+  let ref;
   let side;
   let sideOffset;
   let t1;
@@ -184,9 +188,11 @@ export function ComboboxPopup(t0) {
       align: t3,
       sideOffset: t4,
       className: t5,
+      ref: t6,
       ...props
     } = t0;
     className = t5;
+    ref = t6;
     side = t2 === undefined ? "bottom" : t2;
     align = t3 === undefined ? "start" : t3;
     sideOffset = t4 === undefined ? 6 : t4;
@@ -194,60 +200,75 @@ export function ComboboxPopup(t0) {
     $[0] = t0;
     $[1] = align;
     $[2] = className;
-    $[3] = side;
-    $[4] = sideOffset;
-    $[5] = t1;
+    $[3] = ref;
+    $[4] = side;
+    $[5] = sideOffset;
+    $[6] = t1;
   } else {
     align = $[1];
     className = $[2];
-    side = $[3];
-    sideOffset = $[4];
-    t1 = $[5];
+    ref = $[3];
+    side = $[4];
+    sideOffset = $[5];
+    t1 = $[6];
   }
   const [placement, popupProps] = t1;
+  const [popup, setPopup] = useState(null);
+  const scrollbars = useOverlayScrollbars(popup);
   let t2;
-  if ($[6] !== className) {
-    t2 = withClass("menu-popup min-w-(--anchor-width)", className);
-    $[6] = className;
-    $[7] = t2;
+  if ($[7] !== ref) {
+    t2 = mergeRefs(setPopup, ref);
+    $[7] = ref;
+    $[8] = t2;
   } else {
-    t2 = $[7];
+    t2 = $[8];
   }
   let t3;
-  if ($[8] !== popupProps || $[9] !== t2) {
-    t3 = /*#__PURE__*/_jsx(Autocomplete.Popup, {
-      className: t2,
-      ...popupProps
-    });
-    $[8] = popupProps;
-    $[9] = t2;
+  if ($[9] !== className) {
+    t3 = withClass("menu-popup min-w-(--anchor-width)", className);
+    $[9] = className;
     $[10] = t3;
   } else {
     t3 = $[10];
   }
   let t4;
-  if ($[11] !== align || $[12] !== placement || $[13] !== side || $[14] !== sideOffset || $[15] !== t3) {
-    t4 = /*#__PURE__*/_jsx(Autocomplete.Portal, {
-      children: /*#__PURE__*/_jsx(Autocomplete.Positioner, {
+  if ($[11] !== popupProps || $[12] !== t2 || $[13] !== t3) {
+    t4 = /*#__PURE__*/_jsx(Autocomplete.Popup, {
+      ref: t2,
+      className: t3,
+      ...popupProps
+    });
+    $[11] = popupProps;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== align || $[16] !== placement || $[17] !== scrollbars || $[18] !== side || $[19] !== sideOffset || $[20] !== t4) {
+    t5 = /*#__PURE__*/_jsx(Autocomplete.Portal, {
+      children: /*#__PURE__*/_jsxs(Autocomplete.Positioner, {
         className: "popup-positioner",
         render: renderPositioner,
         ...placement,
         side: side,
         align: align,
         sideOffset: sideOffset,
-        children: t3
+        children: [t4, scrollbars]
       })
     });
-    $[11] = align;
-    $[12] = placement;
-    $[13] = side;
-    $[14] = sideOffset;
-    $[15] = t3;
-    $[16] = t4;
+    $[15] = align;
+    $[16] = placement;
+    $[17] = scrollbars;
+    $[18] = side;
+    $[19] = sideOffset;
+    $[20] = t4;
+    $[21] = t5;
   } else {
-    t4 = $[16];
+    t5 = $[21];
   }
-  return t4;
+  return t5;
 }
 export function ComboboxList(props) {
   const $ = _c(5);

package/dist/command-palette/parts.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentProps, type ReactNode } from 'react';
 import { Autocomplete } from '@base-ui/react/autocomplete';
 import { useRender } from '@base-ui/react/use-render';
+import { type ComponentProps, type ReactNode } from 'react';
 import { DialogRoot, type DialogPopupProps } from '../dialog/parts.tsx';
 declare const SIZE: {
     readonly md: 'w-[576px]';

package/dist/command-palette/parts.js

@@ -1,17 +1,18 @@
 import { c as _c } from "react/compiler-runtime";
-import { useContext, useLayoutEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { useRender } from '@base-ui/react/use-render';
 import clsx from 'clsx';
 import { Search } from 'lucide-react';
+import { useContext, useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Autocomplete } from '@base-ui/react/autocomplete';
-import { useRender } from '@base-ui/react/use-render';
 import { withClass } from '../class-name.js';
 import { DialogPopup, DialogRoot } from "../dialog/parts.js";
 import { Icon } from "../Icon.js";
 import { Kbd } from "../Kbd.js";
 import { mergeRefs } from '../merge-refs.js';
 import { KEY_SHORTCUTS } from '../shortcut.js';
+import { useOverlayScrollbars } from "../useOverlayScrollbars.js";
 import { PaletteRefsContext } from './context.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const NO_ITEMS = [];
@@ -306,7 +307,7 @@ export function CommandPaletteInput(t0) {
 }
 /* It scrolls on its own, so the field and the footer stay put. */
 export function CommandPaletteList(t0) {
-  const $ = _c(21);
+  const $ = _c(24);
   let className;
   let onFocus;
   let props;
@@ -333,10 +334,12 @@ export function CommandPaletteList(t0) {
     t
   } = useTranslation("ui");
   const refs = useContext(PaletteRefsContext);
+  const [list, setList] = useState(null);
+  const scrollbars = useOverlayScrollbars(list);
   const t1 = refs?.list;
   let t2;
   if ($[5] !== ref || $[6] !== t1) {
-    t2 = mergeRefs(ref, t1);
+    t2 = mergeRefs(ref, t1, setList);
     $[5] = ref;
     $[6] = t1;
     $[7] = t2;
@@ -396,7 +399,19 @@ export function CommandPaletteList(t0) {
   } else {
     t6 = $[20];
   }
-  return t6;
+  let t7;
+  if ($[21] !== scrollbars || $[22] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("div", {
+      className: "relative flex min-h-0 flex-col",
+      children: [t6, scrollbars]
+    });
+    $[21] = scrollbars;
+    $[22] = t6;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  return t7;
 }
 export function CommandPaletteFooter(t0) {
   const $ = _c(14);

package/dist/command-palette/virtual.js

@@ -1,10 +1,10 @@
-import { Fragment, useLayoutEffect, useMemo, useRef } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { Autocomplete } from '@base-ui/react/autocomplete';
-import { CommandPaletteList } from "./parts.js";
-import { useCommandPaletteVirtualScroll } from './context.js';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { Fragment, useLayoutEffect, useMemo, useRef } from 'react';
 import { MENU_LABEL } from "../menu/parts.js";
 import { mergeRefs } from '../merge-refs.js';
+import { useCommandPaletteVirtualScroll } from './context.js';
+import { CommandPaletteList } from "./parts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function virtualRowsOf(values, labelled) {
   const groups = [];

package/dist/dialog/parts.d.ts

@@ -1,6 +1,6 @@
-import { type ComponentProps } from 'react';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { useRender } from '@base-ui/react/use-render';
+import { type ComponentProps } from 'react';
 declare const SIZE: {
     readonly sm: 'w-[420px] p-5';
 };

package/dist/dialog/parts.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { createContext, useContext, useState } from 'react';
-import clsx from 'clsx';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { createContext, useContext, useState } from 'react';
 import { withClass } from '../class-name.js';
 import { useDialogLayer } from '../dialog-layer.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/file-tree/parts.d.ts

@@ -1,8 +1,8 @@
-import { type ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import { type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { FileTree, FileTreeVisibleRow } from '@pierre/trees';
+import { type FileTreeProps as PierreProps } from '@pierre/trees/react';
 import type { LucideIcon } from 'lucide-react';
+import { type ReactNode } from 'react';
 import type { FileTreeEmptyLabel } from './empty-lines.ts';
 import { type FileTreeDecorationOrder } from './use-slots.ts';
 export type FileTreeRootProps = useRender.ComponentProps<'div'> & {

package/dist/file-tree/parts.js

@@ -1,10 +1,10 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
 import { useRender } from '@base-ui/react/use-render';
 import { FileTree as PierreFileTree } from '@pierre/trees/react';
-import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
 import { Icon } from "../Icon.js";
 import { mergeRefs } from '../merge-refs.js';
 import { directoryHandle, extendsSelection, followFocus, movesFocus, menuTargetsOf, rowPathOf, visibleRows } from './helpers.js';

package/dist/file-tree/use-file-tree-shift.d.ts

@@ -1,5 +1,5 @@
-import { type ReactElement } from 'react';
 import type { FileTree } from '@pierre/trees';
+import { type ReactElement } from 'react';
 export declare function useFileTreeShift(model: FileTree, resetKey?: string): {
     attach(node: HTMLElement | null): void;
     bar: ReactElement;

package/dist/file-tree/use-file-tree-shift.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import 'react';
-import { useTreeShift } from "../tree/use-tree-shift.js";
 import { shiftNeed } from '../tree/shift.js';
+import { useTreeShift } from "../tree/use-tree-shift.js";
 const ROWS = '[data-type="item"]:not([data-item-parked="true"])';
 function boxesOf(element) {
   return element.getClientRects().length > 0 ? [element] : [...element.children].flatMap(child => boxesOf(child));

package/dist/index.d.ts

@@ -48,6 +48,7 @@ export { Pill, type PillProps } from './Pill.tsx';
 export { PromptDialog, type PromptDialogProps } from './PromptDialog.tsx';
 export { RelativeTime, type RelativeTimeProps } from './RelativeTime.tsx';
 export { ProjectSwitcher, ProjectSwitcherGroups, type ProjectSwitcherItem, type ProjectSwitcherProps } from './ProjectSwitcher.tsx';
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea.tsx';
 export { SectionLabel, type SectionLabelProps } from './SectionLabel.tsx';
 export { SegmentBar, type SegmentBarPart, type SegmentBarProps } from './SegmentBar.tsx';
 export { Segmented, type SegmentedOption, type SegmentedProps } from './Segmented.tsx';
@@ -92,6 +93,7 @@ export { clampColumnSize, useColumnResize, type ColumnEdge, type ColumnResize, t
 export { useContentSize, type ContentSize } from './useContentSize.ts';
 export { useMeasuredWidth } from './useMeasuredWidth.ts';
 export { useNow, useTickingText } from './useNow.ts';
+export { useOverlayScrollbars, type OverlayScrollbarsOptions, type ScrollAreaAxis } from './useOverlayScrollbars.tsx';
 export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts';
 export type { FileTreeRootProps } from './file-tree/parts.tsx';
 export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';

package/dist/index.js

@@ -45,6 +45,7 @@ export { Pill } from "./Pill.js";
 export { PromptDialog } from "./PromptDialog.js";
 export { RelativeTime } from "./RelativeTime.js";
 export { ProjectSwitcher, ProjectSwitcherGroups } from "./ProjectSwitcher.js";
+export { ScrollArea } from "./ScrollArea.js";
 export { SectionLabel } from "./SectionLabel.js";
 export { SegmentBar } from "./SegmentBar.js";
 export { Segmented } from "./Segmented.js";
@@ -86,6 +87,7 @@ export { clampColumnSize, useColumnResize } from './useColumnResize.js';
 export { useContentSize } from './useContentSize.js';
 export { useMeasuredWidth } from './useMeasuredWidth.js';
 export { useNow, useTickingText } from './useNow.js';
+export { useOverlayScrollbars } from "./useOverlayScrollbars.js";
 export { useFileTree } from './file-tree/use-file-tree.js';
 export { Workspace } from "./workspace/Workspace.js";
 export { WorkspaceRail, WorkspaceRailSeparator, WorkspaceRailSpacer } from "./workspace/WorkspaceRail.js";

package/dist/key-value-list/parts.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 /* Every item is a subgrid of the list, so the names line up across rows and a hairline runs under both columns. */
 export function KeyValueListRoot(t0) {
   const $ = _c(16);

package/dist/menu/parts.d.ts

@@ -1,9 +1,9 @@
-import { type ComponentProps, type ReactNode, type Ref } from 'react';
-import { type LucideIcon } 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 { type LucideIcon } from 'lucide-react';
+import { type ComponentProps, type ReactNode, type Ref } from 'react';
 import { type PlacementKey } from '../placement.ts';
 type PositionerProps = ComponentProps<typeof BaseMenu.Positioner>;
 type Placement = Pick<PositionerProps, PlacementKey>;
@@ -14,7 +14,7 @@ export declare function MenuSubmenuRoot(props: ComponentProps<typeof BaseMenu.Su
 export declare const MenuTrigger: BaseMenu.Trigger;
 export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup> & Placement;
-export declare function MenuPopup({ className, ...props }: MenuPopupProps): import("react").JSX.Element;
+export declare function MenuPopup({ className, ref, ...props }: MenuPopupProps): import("react").JSX.Element;
 type ItemLook = {
     unstyled?: boolean;
 };

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 {};