@adecore/ui 0.46.1 → 0.46.2

package/dist/settings/SettingsDialog.js

@@ -62,7 +62,7 @@ function NavTab(t0) {
   return t3;
 }
 function SettingsNav(t0) {
-  const $ = _c(13);
+  const $ = _c(15);
   const {
     groups,
     footer,
@@ -71,64 +71,97 @@ function SettingsNav(t0) {
   const {
     t
   } = useTranslation("ui");
+  const list = useRef(null);
   let t1;
-  if ($[0] !== t) {
-    t1 = t("settings.sections");
-    $[0] = t;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
   let t2;
-  if ($[2] !== groups) {
-    t2 = groups.map(_temp2);
-    $[2] = groups;
-    $[3] = t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      const element = list.current;
+      if (!element) {
+        return;
+      }
+      const mark = () => {
+        element.toggleAttribute("data-fade-start", element.scrollTop > 0);
+        element.toggleAttribute("data-fade-end", Math.ceil(element.scrollTop + element.clientHeight) < element.scrollHeight);
+      };
+      mark();
+      const observer = new ResizeObserver(mark);
+      observer.observe(element);
+      element.addEventListener("scroll", mark, {
+        passive: true
+      });
+      return () => {
+        observer.disconnect();
+        element.removeEventListener("scroll", mark);
+      };
+    };
+    t2 = [];
+    $[0] = t1;
+    $[1] = t2;
   } else {
-    t2 = $[3];
+    t1 = $[0];
+    t2 = $[1];
   }
+  useEffect(t1, t2);
   let t3;
-  if ($[4] !== t2) {
-    t3 = /*#__PURE__*/_jsx("div", {
-      className: "flex min-h-0 flex-col gap-3.5 overflow-y-auto",
-      children: t2
-    });
-    $[4] = t2;
-    $[5] = t3;
+  if ($[2] !== t) {
+    t3 = t("settings.sections");
+    $[2] = t;
+    $[3] = t3;
   } else {
-    t3 = $[5];
+    t3 = $[3];
   }
   let t4;
-  if ($[6] !== account || $[7] !== footer) {
-    t4 = (footer?.length || account) && /*#__PURE__*/_jsxs("div", {
+  if ($[4] !== groups) {
+    t4 = groups.map(_temp2);
+    $[4] = groups;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  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",
+      children: t4
+    });
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== account || $[9] !== footer) {
+    t6 = (footer?.length || account) && /*#__PURE__*/_jsxs("div", {
       className: "mt-auto flex flex-col gap-3 pt-3.5",
       children: [footer?.map(_temp3), account && /*#__PURE__*/_jsx("div", {
         className: "-mx-3 -mb-1 border-t border-border px-3 pt-3",
         children: account.tab
       })]
     });
-    $[6] = account;
-    $[7] = footer;
-    $[8] = t4;
+    $[8] = account;
+    $[9] = footer;
+    $[10] = t6;
   } else {
-    t4 = $[8];
+    t6 = $[10];
   }
-  let t5;
-  if ($[9] !== t1 || $[10] !== t3 || $[11] !== t4) {
-    t5 = /*#__PURE__*/_jsxs(Tabs.List, {
-      "aria-label": t1,
+  let t7;
+  if ($[11] !== t3 || $[12] !== t5 || $[13] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(Tabs.List, {
+      "aria-label": t3,
       activateOnFocus: true,
       className: "flex min-h-0 grow flex-col",
-      children: [t3, t4]
+      children: [t5, t6]
     });
-    $[9] = t1;
-    $[10] = t3;
-    $[11] = t4;
+    $[11] = t3;
     $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
   } else {
-    t5 = $[12];
+    t7 = $[14];
   }
-  return t5;
+  return t7;
 }
 function _temp3(section_0) {
   return /*#__PURE__*/_jsx(NavTab, {
@@ -483,7 +516,7 @@ export function SettingsDialog(t0) {
   }
   let t14;
   if ($[27] !== className) {
-    t14 = clsx("flex h-[760px] w-[1200px]", className);
+    t14 = clsx("flex h-[min(840px,calc(100dvh-64px))] w-[1200px]", className);
     $[27] = className;
     $[28] = t14;
   } else {

package/dist/theme.css

@@ -592,6 +592,14 @@
         mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-start));
     }
     .scroll-fade-top[data-fade-start] { --fade-start: 24px; }
+    /* A column that scrolls with something fixed above and below it fades at either end that still hides a row. */
+    .scroll-fade-y {
+        --fade-start: 0px;
+        --fade-end: 0px;
+        mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
+    }
+    .scroll-fade-y[data-fade-start] { --fade-start: 24px; }
+    .scroll-fade-y[data-fade-end] { --fade-end: 24px; }
 
     /* A toast's countdown ring; `TimerRing` sets duration and delay from the toast's own timer. */
     .toast-timer-arc { animation: toast-timer linear forwards; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.46.1",
+  "version": "0.46.2",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/settings/SettingsDialog.tsx

@@ -97,10 +97,35 @@ function NavTab({ section }: { section: SettingsSectionEntry }) {
 
 function SettingsNav({ groups, footer, account }: Pick<SettingsDialogProps, 'groups' | 'footer' | 'account'>) {
     const { t } = useTranslation('ui');
+    const list = useRef<HTMLDivElement>(null);
+
+    // A list cut off by the footer fades at the edge that hides a section, so the cut never reads as the end.
+    useEffect(() => {
+        const element = list.current;
+
+        if (!element) {
+            return;
+        }
+
+        const mark = (): void => {
+            element.toggleAttribute('data-fade-start', element.scrollTop > 0);
+            element.toggleAttribute('data-fade-end', Math.ceil(element.scrollTop + element.clientHeight) < element.scrollHeight);
+        };
+
+        mark();
+        const observer = new ResizeObserver(mark);
+        observer.observe(element);
+        element.addEventListener('scroll', mark, { passive: true });
+
+        return () => {
+            observer.disconnect();
+            element.removeEventListener('scroll', mark);
+        };
+    }, []);
 
     return (
         <Tabs.List aria-label={t('settings.sections')} activateOnFocus className="flex min-h-0 grow flex-col">
-            <div className="flex min-h-0 flex-col gap-3.5 overflow-y-auto">
+            <div ref={list} className="scroll-fade-y flex min-h-0 flex-col gap-3.5 overflow-y-auto">
                 {groups.map((group) => (
                     <div key={group.sections[0]!.id} className="flex flex-col gap-0.5">
                         {group.label !== null && <span className="px-2.5 pt-2.5 pb-1 text-xs font-medium text-text-faint">{group.label}</span>}
@@ -272,8 +297,9 @@ export function SettingsDialog({
             }}
         >
             {/* The width steps down with the viewport: a narrower navigation on a tablet, and a menu of
-                sections instead of the column where even that leaves the panes too little room. */}
-            <DialogPopup ref={ref} className={clsx('flex h-[760px] w-[1200px]', className)}>
+                sections instead of the column where even that leaves the panes too little room. The
+                height keeps the whole navigation in view where the screen allows it. */}
+            <DialogPopup ref={ref} className={clsx('flex h-[min(840px,calc(100dvh-64px))] w-[1200px]', className)}>
                 <Tabs.Root
                     value={meta.id}
                     onValueChange={(value) => onNavigate({ section: value as string })}

package/src/theme.css

@@ -592,6 +592,14 @@
         mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-start));
     }
     .scroll-fade-top[data-fade-start] { --fade-start: 24px; }
+    /* A column that scrolls with something fixed above and below it fades at either end that still hides a row. */
+    .scroll-fade-y {
+        --fade-start: 0px;
+        --fade-end: 0px;
+        mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
+    }
+    .scroll-fade-y[data-fade-start] { --fade-start: 24px; }
+    .scroll-fade-y[data-fade-end] { --fade-end: 24px; }
 
     /* A toast's countdown ring; `TimerRing` sets duration and delay from the toast's own timer. */
     .toast-timer-arc { animation: toast-timer linear forwards; }