@adecore/ui 0.54.12 → 0.54.13

package/dist/menu/parts.d.ts

@@ -19,7 +19,7 @@ type ItemLook = {
     unstyled?: boolean;
 };
 type MenuItemProps = ComponentProps<typeof BaseMenu.Item> & ItemLook;
-export declare function MenuItem({ unstyled, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ unstyled, className, children, ...props }: MenuItemProps): import("react").JSX.Element;
 export interface MenuCheckProps {
     kind: 'radio' | 'checkbox';
     checked?: boolean;

package/dist/menu/parts.js

@@ -159,8 +159,33 @@ export function MenuPopup(t0) {
   }
   return t8;
 }
+/*
+ * Typing in an open menu moves to the first row whose text starts with the letters, read from the
+ * row's `label` or else its rendered text. The space JSX keeps between an icon and the name
+ * (`<Icon /> {name}`) draws nothing in a row laid out with a gap, but it would start that text and
+ * keep the row from ever matching. A row whose text starts with something other than its name,
+ * such as initials before it, sets `label`.
+ */
+function withoutLeadingSpace(children) {
+  if (typeof children === 'string') {
+    return children.trimStart();
+  }
+  if (!Array.isArray(children)) {
+    return children;
+  }
+  let reached = false;
+  return children.map(child => {
+    if (reached || typeof child !== 'string') {
+      return child;
+    }
+    const trimmed = child.trimStart();
+    reached = trimmed !== '';
+    return trimmed;
+  });
+}
 export function MenuItem(t0) {
-  const $ = _c(10);
+  const $ = _c(15);
+  let children;
   let className;
   let props;
   let t1;
@@ -168,40 +193,54 @@ export function MenuItem(t0) {
     ({
       unstyled: t1,
       className,
+      children,
       ...props
     } = t0);
     $[0] = t0;
-    $[1] = className;
-    $[2] = props;
-    $[3] = t1;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = t1;
   } else {
-    className = $[1];
-    props = $[2];
-    t1 = $[3];
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    t1 = $[4];
   }
   const unstyled = t1 === undefined ? false : t1;
   let t2;
-  if ($[4] !== className || $[5] !== unstyled) {
+  if ($[5] !== className || $[6] !== unstyled) {
     t2 = unstyled ? className : withClass("menu-item", className);
-    $[4] = className;
-    $[5] = unstyled;
-    $[6] = t2;
+    $[5] = className;
+    $[6] = unstyled;
+    $[7] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[7];
   }
   let t3;
-  if ($[7] !== props || $[8] !== t2) {
-    t3 = /*#__PURE__*/_jsx(BaseMenu.Item, {
+  if ($[8] !== children || $[9] !== unstyled) {
+    t3 = unstyled ? children : withoutLeadingSpace(children);
+    $[8] = children;
+    $[9] = unstyled;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== props || $[12] !== t2 || $[13] !== t3) {
+    t4 = /*#__PURE__*/_jsx(BaseMenu.Item, {
       className: t2,
-      ...props
+      ...props,
+      children: t3
     });
-    $[7] = props;
-    $[8] = t2;
-    $[9] = t3;
+    $[11] = props;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
   } else {
-    t3 = $[9];
+    t4 = $[14];
   }
-  return t3;
+  return t4;
 }
 /* One line of the row tall, so a row with a second line keeps the tick beside its first. */
 export function MenuCheck(t0) {
@@ -281,7 +320,7 @@ export function MenuCheck(t0) {
 const checkRow = (kind, unstyled, indicator, children) => unstyled ? children : /*#__PURE__*/_jsxs(_Fragment, {
   children: [indicator === 'start' && /*#__PURE__*/_jsx(MenuCheck, {
     kind: kind
-  }), children, indicator === 'end' && /*#__PURE__*/_jsx(MenuCheck, {
+  }), withoutLeadingSpace(children), indicator === 'end' && /*#__PURE__*/_jsx(MenuCheck, {
     kind: kind,
     className: "ml-auto"
   })]
@@ -418,7 +457,7 @@ export function MenuRadioItem(t0) {
   return t5;
 }
 export function MenuSubmenuTrigger(t0) {
-  const $ = _c(14);
+  const $ = _c(16);
   let children;
   let className;
   let props;
@@ -451,33 +490,41 @@ export function MenuSubmenuTrigger(t0) {
     t2 = $[6];
   }
   let t3;
-  if ($[7] !== chevron) {
-    t3 = chevron && /*#__PURE__*/_jsx(Icon, {
+  if ($[7] !== children) {
+    t3 = withoutLeadingSpace(children);
+    $[7] = children;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== chevron) {
+    t4 = chevron && /*#__PURE__*/_jsx(Icon, {
       icon: ChevronRight,
       size: 14,
       className: "ml-auto text-text-faint"
     });
-    $[7] = chevron;
-    $[8] = t3;
+    $[9] = chevron;
+    $[10] = t4;
   } else {
-    t3 = $[8];
+    t4 = $[10];
   }
-  let t4;
-  if ($[9] !== children || $[10] !== props || $[11] !== t2 || $[12] !== t3) {
-    t4 = /*#__PURE__*/_jsxs(BaseMenu.SubmenuTrigger, {
+  let t5;
+  if ($[11] !== props || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
+    t5 = /*#__PURE__*/_jsxs(BaseMenu.SubmenuTrigger, {
       className: t2,
       ...props,
-      children: [children, t3]
+      children: [t3, t4]
     });
-    $[9] = children;
-    $[10] = props;
-    $[11] = t2;
-    $[12] = t3;
-    $[13] = t4;
+    $[11] = props;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
   } else {
-    t4 = $[13];
+    t5 = $[15];
   }
-  return t4;
+  return t5;
 }
 /* Its first item is the row, every `RowAction` and `RowSubmenuTrigger` after it an item of its own, so the arrow keys reach each. */
 export function MenuRow(t0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.54.12",
+  "version": "0.54.13",
   "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/menu/parts.tsx

@@ -97,10 +97,44 @@ type ItemLook = {
     unstyled?: boolean;
 };
 
+/*
+ * Typing in an open menu moves to the first row whose text starts with the letters, read from the
+ * row's `label` or else its rendered text. The space JSX keeps between an icon and the name
+ * (`<Icon /> {name}`) draws nothing in a row laid out with a gap, but it would start that text and
+ * keep the row from ever matching. A row whose text starts with something other than its name,
+ * such as initials before it, sets `label`.
+ */
+function withoutLeadingSpace(children: ReactNode): ReactNode {
+    if (typeof children === 'string') {
+        return children.trimStart();
+    }
+
+    if (!Array.isArray(children)) {
+        return children;
+    }
+
+    let reached = false;
+
+    return children.map((child: ReactNode) => {
+        if (reached || typeof child !== 'string') {
+            return child;
+        }
+
+        const trimmed = child.trimStart();
+        reached = trimmed !== '';
+
+        return trimmed;
+    });
+}
+
 type MenuItemProps = ComponentProps<typeof BaseMenu.Item> & ItemLook;
 
-export function MenuItem({ unstyled = false, className, ...props }: MenuItemProps) {
-    return <BaseMenu.Item className={unstyled ? className : withClass('menu-item', className)} {...props} />;
+export function MenuItem({ unstyled = false, className, children, ...props }: MenuItemProps) {
+    return (
+        <BaseMenu.Item className={unstyled ? className : withClass('menu-item', className)} {...props}>
+            {unstyled ? children : withoutLeadingSpace(children)}
+        </BaseMenu.Item>
+    );
 }
 
 export interface MenuCheckProps {
@@ -147,7 +181,7 @@ const checkRow = (kind: MenuCheckProps['kind'], unstyled: boolean, indicator: In
     ) : (
         <>
             {indicator === 'start' && <MenuCheck kind={kind} />}
-            {children}
+            {withoutLeadingSpace(children)}
             {indicator === 'end' && <MenuCheck kind={kind} className="ml-auto" />}
         </>
     );
@@ -182,7 +216,7 @@ type SubmenuTriggerProps = ComponentProps<typeof BaseMenu.SubmenuTrigger> & {
 export function MenuSubmenuTrigger({ className, children, chevron = true, ...props }: SubmenuTriggerProps) {
     return (
         <BaseMenu.SubmenuTrigger className={withClass('menu-item', className)} {...props}>
-            {children}
+            {withoutLeadingSpace(children)}
             {chevron && <Icon icon={ChevronRight} size={14} className="ml-auto text-text-faint" />}
         </BaseMenu.SubmenuTrigger>
     );