@trackunit/react-components 2.10.24 → 2.10.27-alpha-7557f71cc7a.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.10.24",
+  "version": "2.10.27-alpha-7557f71cc7a.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,16 +14,16 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.15.11",
-    "@trackunit/css-class-variance-utilities": "1.14.21",
-    "@trackunit/shared-utils": "1.16.24",
-    "@trackunit/ui-icons": "1.14.20",
+    "@trackunit/ui-design-tokens": "1.15.13-alpha-7557f71cc7a.0",
+    "@trackunit/css-class-variance-utilities": "1.14.23-alpha-7557f71cc7a.0",
+    "@trackunit/shared-utils": "1.16.26-alpha-7557f71cc7a.0",
+    "@trackunit/ui-icons": "1.14.22-alpha-7557f71cc7a.0",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "^3.14.3",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.4.29"
+    "@trackunit/i18n-library-translation": "2.4.32-alpha-7557f71cc7a.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/Menu/MenuContent/MenuContent.d.ts

@@ -29,6 +29,11 @@ export interface MenuContentProps extends CommonProps, Styleable, Refable<HTMLDi
      * Callback triggered when selected items change.
      */
     onSelectionChange?: (selected: Array<string>) => void;
+    /**
+     * Accessible name for the `role="menu"` node. Prefer this (or `aria-labelledby` via the trigger)
+     * when the menu is not named by surrounding chrome.
+     */
+    "aria-label"?: string;
 }
 /**
  * MenuContent (formerly MenuList) is a popover menu that appears above all other content on the page. It offers a
@@ -36,6 +41,9 @@ export interface MenuContentProps extends CommonProps, Styleable, Refable<HTMLDi
  * roving-tabindex Up/Down navigation (wrapping), Home/End, typeahead, and — via `MenuItem`'s `submenu` prop —
  * nested submenu entry/exit.
  *
+ * Items join this menu themselves via `FloatingList` + `useListItem`, so wrapping components do not hide them
+ * from the keyboard loop. Non-item children (search inputs, headings, dividers) render untouched.
+ *
  * Typically rendered inside a `Popover` (directly, or as `PopoverContent`'s children), in which case it reads
  * the popover's floating context to power its keyboard navigation. Also works standalone (e.g. inside a
  * `Collapse`, with no ambient `Popover`), falling back to its own local, always-open floating context.
@@ -93,4 +101,4 @@ export interface MenuContentProps extends CommonProps, Styleable, Refable<HTMLDi
  * @param {MenuContentProps} props - The props for the MenuContent component
  * @returns {ReactElement} MenuContent component
  */
-export declare const MenuContent: ({ "data-testid": dataTestId, className, listClassName, children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, style, ref, ...args }: MenuContentProps) => ReactElement;
+export declare const MenuContent: ({ "data-testid": dataTestId, className, listClassName, children, isMulti, selectedItems, onSelectionChange, style, ref, "aria-label": ariaLabel, ...args }: MenuContentProps) => ReactElement;

package/src/components/Menu/MenuContent/MenuContentContext.d.ts

@@ -0,0 +1,23 @@
+import { HTMLProps } from "react";
+type MenuItemInteractionProps = Omit<HTMLProps<HTMLElement>, "selected" | "active"> & {
+    active?: boolean;
+    selected?: boolean;
+};
+export interface MenuContentContextValue {
+    activeIndex: number | null;
+    firstEnabledIndex: number;
+    getItemProps: (userProps?: MenuItemInteractionProps) => Record<string, unknown>;
+    isMulti: boolean;
+    selectedItems: Array<string>;
+    handleItemClick: (id: string) => void;
+    syncRegisteredList: () => void;
+}
+declare const MenuContentContext: import("react").Context<MenuContentContextValue | null>;
+/**
+ * Like `useOptionalPopoverContext`, but for the nearest `MenuContent`.
+ * `MenuItem` is used without a menu in places, so a missing ancestor must not throw.
+ *
+ * @returns {MenuContentContextValue | null} The menu context, or `null` when there is no ancestor `MenuContent`
+ */
+export declare const useOptionalMenuContentContext: () => MenuContentContextValue | null;
+export { MenuContentContext };

package/src/components/Menu/MenuContent/compactFloatingListRefs.d.ts

@@ -0,0 +1,18 @@
+import { MutableRefObject } from "react";
+/**
+ * FloatingList only grows `elementsRef` / `labelsRef`. On unmount, `useListItem` nulls the element
+ * but writes the label back, so a removed row stays a live typeahead target on a dead slot.
+ * Re-establish both arrays from currently mounted nodes after each commit.
+ *
+ * @param elementsRef The FloatingList elements array
+ * @param labelsRef The FloatingList typeahead labels array, kept in lockstep with `elementsRef`
+ */
+export declare const compactFloatingListRefs: (elementsRef: MutableRefObject<Array<HTMLElement | null>>, labelsRef: MutableRefObject<Array<string | null>>) => void;
+/**
+ * Index of the first registered item that is not `aria-disabled`. Used as the initial tab stop
+ * when `activeIndex` is still null.
+ *
+ * @param elementsRef The FloatingList elements array
+ * @returns {number} The first enabled index, or `0` when the list has no enabled item
+ */
+export declare const firstEnabledListIndex: (elementsRef: MutableRefObject<Array<HTMLElement | null>>) => number;

package/src/components/Menu/MenuContent/useMenuContentState.d.ts

@@ -0,0 +1,23 @@
+import { useInteractions, useMergeRefs } from "@floating-ui/react";
+import { KeyboardEvent, MutableRefObject, ReactNode, Ref } from "react";
+import { MenuContentContextValue } from "./MenuContentContext";
+export interface UseMenuContentStateProps {
+    children: ReactNode;
+    isMulti: boolean;
+    selectedItems?: Array<string>;
+    onSelectionChange?: (selected: Array<string>) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface UseMenuContentStateResult {
+    floatingRef: ReturnType<typeof useMergeRefs<HTMLDivElement>>;
+    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
+    handleKeyDownCapture: (event: KeyboardEvent<HTMLDivElement>) => void;
+    listRef: MutableRefObject<Array<HTMLElement | null>>;
+    labelsRef: MutableRefObject<Array<string | null>>;
+    menuContext: MenuContentContextValue;
+}
+/**
+ * Owns MenuContent's list registration, selection, and typeable-child key handling so the
+ * component file stays the shell + JSX.
+ */
+export declare const useMenuContentState: ({ children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ref, }: UseMenuContentStateProps) => UseMenuContentStateResult;

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -12,12 +12,13 @@ export interface MenuItemProps extends CommonProps, Styleable, Refable<HTMLDivEl
      */
     id?: string;
     /**
-     * Label of the menu item
+     * Label of the menu item. Also the typeahead string. When `children` is a React node rather than
+     * a string, keep `label` set so typeahead still matches this row.
      */
     label?: string;
     /**
-     * The children element is a custom element that can be used to override the label.
-     * If you use this prop, the label prop will be ignored.
+     * Custom content that replaces the label visually. Does not replace `label` for typeahead —
+     * keep `label` set to the searchable string whenever `children` is not itself a string.
      */
     children?: ReactNode;
     /**

package/src/components/Menu/MenuItem/useCloseWhenScrolledOut.d.ts

@@ -0,0 +1,21 @@
+import { MutableRefObject } from "react";
+export interface UseCloseWhenScrolledOutOptions {
+    open: boolean;
+    nodeRef: MutableRefObject<HTMLElement | null>;
+    returnFocusRef: MutableRefObject<HTMLElement | null>;
+    onClose: () => void;
+}
+/**
+ * A submenu's trigger row commonly lives inside a scrollable `MenuContent` list. Without this, a
+ * submenu opened from a row that later scrolls out of view stays open, floating disconnected from
+ * any visible row -- and (since nothing else would ever close it) stays that way even once the row
+ * scrolls back into view. `IntersectionObserver` (rather than e.g. the `Popover`'s own
+ * `ancestorScroll` dismissal) is what lets this react to the row's actual visibility instead of
+ * firing on every scroll tick of any ancestor, however small or unrelated to this row -- browsers
+ * compute intersection against every ancestor's overflow-clip box, not just an explicit `root`, so
+ * this fires as soon as *this* row's clipped out, even if some other list ancestor keeps scrolling.
+ * Only observing while `open` (rather than unconditionally) means the effect's own close
+ * never re-triggers itself, which is also exactly what keeps the submenu from reopening on its own
+ * once the row scrolls back into view -- there's no observer left running to notice that happen.
+ */
+export declare const useCloseWhenScrolledOut: ({ open, nodeRef, returnFocusRef, onClose, }: UseCloseWhenScrolledOutOptions) => void;

package/src/components/Menu/MenuItem/useMenuItemBehavior.d.ts

@@ -0,0 +1,38 @@
+import { useMergeRefs } from "@floating-ui/react";
+import { FocusEventHandler, MouseEventHandler, MutableRefObject, PointerEventHandler, ReactNode, Ref } from "react";
+interface UseMenuItemBehaviorProps {
+    className?: string;
+    label?: string;
+    children?: ReactNode;
+    selected: boolean;
+    disabled: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    stopPropagation: boolean;
+    id?: string;
+    tabIndex?: number;
+    ref?: Ref<HTMLDivElement>;
+    submenu?: ReactNode;
+    suffix?: ReactNode;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onMouseMove?: MouseEventHandler<HTMLDivElement>;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
+}
+export interface UseMenuItemBehaviorResult {
+    mergedRowRef: ReturnType<typeof useMergeRefs<HTMLDivElement>>;
+    mergedTriggerRef: ReturnType<typeof useMergeRefs<HTMLDivElement>>;
+    submenuOpen: boolean;
+    setSubmenuOpen: (open: boolean) => void;
+    returnFocusRef: MutableRefObject<HTMLElement | null>;
+    isSelected: boolean;
+    resolvedSuffix: ReactNode | undefined;
+    listClassName?: string;
+    resolvedTabIndex: number;
+    interactionProps: Record<string, unknown>;
+}
+/**
+ * Registers this row with the nearest `MenuContent` (no-op when there isn't one) and resolves the
+ * interaction / selection / tabIndex props the row needs. Submenu open state lives here so the
+ * scroll-out closer can share it.
+ */
+export declare const useMenuItemBehavior: ({ className, label, children, selected, disabled, onClick, stopPropagation, id, tabIndex, ref, submenu, suffix, onFocus, onMouseMove, onPointerLeave, }: UseMenuItemBehaviorProps) => UseMenuItemBehaviorResult;
+export {};