@tale-ui/react 0.0.3

package/menu/root/MenuRoot.d.ts

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { MenuRootContext } from "./MenuRootContext.js";
+import { MenubarContext } from "../../menubar/MenubarContext.js";
+import { type TaleUIChangeEventDetails } from "../../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { ContextMenuRootContext } from "../../context-menu/root/ContextMenuRootContext.js";
+import { MenuStore } from "../store/MenuStore.js";
+import { MenuHandle } from "../store/MenuHandle.js";
+import { PayloadChildRenderFunction } from "../../utils/popups/index.js";
+/**
+ * Groups all parts of the menu.
+ * Doesn’t render its own HTML element.
+ *
+ * Documentation: [Tale UI Menu](https://base-ui.com/react/components/menu)
+ */
+export declare const MenuRoot: <Payload>(props: MenuRoot.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+export interface MenuRootProps<Payload = unknown> {
+  /**
+   * Whether the menu is initially open.
+   *
+   * To render a controlled menu, use the `open` prop instead.
+   * @default false
+   */
+  defaultOpen?: boolean | undefined;
+  /**
+   * Whether to loop keyboard focus back to the first item
+   * when the end of the list is reached while using the arrow keys.
+   * @default true
+   */
+  loopFocus?: boolean | undefined;
+  /**
+   * Whether moving the pointer over items should highlight them.
+   * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
+   * @default true
+   */
+  highlightItemOnHover?: boolean | undefined;
+  /**
+   * Determines if the menu enters a modal state when open.
+   * - `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled.
+   * - `false`: user interaction with the rest of the document is allowed.
+   * @default true
+   */
+  modal?: boolean | undefined;
+  /**
+   * Event handler called when the menu is opened or closed.
+   */
+  onOpenChange?: ((open: boolean, eventDetails: MenuRoot.ChangeEventDetails) => void) | undefined;
+  /**
+   * Event handler called after any animations complete when the menu is closed.
+   */
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+  /**
+   * Whether the menu is currently open.
+   */
+  open?: boolean | undefined;
+  /**
+   * The visual orientation of the menu.
+   * Controls whether roving focus uses up/down or left/right arrow keys.
+   * @default 'vertical'
+   */
+  orientation?: MenuRoot.Orientation | undefined;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * When in a submenu, determines whether pressing the Escape key
+   * closes the entire menu, or only the current child menu.
+   * @default false
+   */
+  closeParentOnEsc?: boolean | undefined;
+  /**
+   * A ref to imperative actions.
+   * - `unmount`: When specified, the menu will not be unmounted when closed.
+   *    Instead, the `unmount` function must be called to unmount the menu manually.
+   *   Useful when the menu's animation is controlled by an external library.
+   * - `close`: When specified, the menu can be closed imperatively.
+   */
+  actionsRef?: React.RefObject<MenuRoot.Actions | null> | undefined;
+  /**
+   * ID of the trigger that the popover is associated with.
+   * This is useful in conjunction with the `open` prop to create a controlled popover.
+   * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
+   */
+  triggerId?: string | null | undefined;
+  /**
+   * ID of the trigger that the popover is associated with.
+   * This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
+   */
+  defaultTriggerId?: string | null | undefined;
+  /**
+   * A handle to associate the menu with a trigger.
+   * If specified, allows external triggers to control the menu's open state.
+   */
+  handle?: MenuHandle<Payload> | undefined;
+  /**
+   * The content of the popover.
+   * This can be a regular React node or a render function that receives the `payload` of the active trigger.
+   */
+  children?: React.ReactNode | PayloadChildRenderFunction<Payload>;
+}
+export interface MenuRootActions {
+  unmount: () => void;
+  close: () => void;
+}
+export type MenuRootChangeEventReason = typeof REASONS.triggerHover | typeof REASONS.triggerFocus | typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.focusOut | typeof REASONS.listNavigation | typeof REASONS.escapeKey | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.siblingOpen | typeof REASONS.cancelOpen | typeof REASONS.imperativeAction | typeof REASONS.none;
+export type MenuRootChangeEventDetails = TaleUIChangeEventDetails<MenuRoot.ChangeEventReason> & {
+  preventUnmountOnClose(): void;
+};
+export type MenuRootOrientation = 'horizontal' | 'vertical';
+export type MenuParent = {
+  type: 'menu';
+  store: MenuStore<unknown>;
+} | {
+  type: 'menubar';
+  context: MenubarContext;
+} | {
+  type: 'context-menu';
+  context: ContextMenuRootContext;
+} | {
+  type: 'nested-context-menu';
+  context: ContextMenuRootContext;
+  menuContext: MenuRootContext;
+} | {
+  type: undefined;
+};
+export declare namespace MenuRoot {
+  type Props<Payload = unknown> = MenuRootProps<Payload>;
+  type Actions = MenuRootActions;
+  type ChangeEventReason = MenuRootChangeEventReason;
+  type ChangeEventDetails = MenuRootChangeEventDetails;
+  type Orientation = MenuRootOrientation;
+}

package/menu/root/MenuRoot.js

@@ -0,0 +1,440 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuRoot = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useTimeout = require("@tale-ui/utils/useTimeout");
+var _useStableCallback = require("@tale-ui/utils/useStableCallback");
+var _useId = require("@tale-ui/utils/useId");
+var _useIsoLayoutEffect = require("@tale-ui/utils/useIsoLayoutEffect");
+var _useOnFirstRender = require("@tale-ui/utils/useOnFirstRender");
+var _useScrollLock = require("@tale-ui/utils/useScrollLock");
+var _empty = require("@tale-ui/utils/empty");
+var _fastHooks = require("@tale-ui/utils/fastHooks");
+var _floatingUiReact = require("../../floating-ui-react");
+var _MenuRootContext = require("./MenuRootContext");
+var _MenubarContext = require("../../menubar/MenubarContext");
+var _constants = require("../../utils/constants");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
+var _createTaleUIEventDetails = require("../../utils/createTaleUIEventDetails");
+var _reasons = require("../../utils/reasons");
+var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
+var _mergeProps = require("../../merge-props");
+var _MenuStore = require("../store/MenuStore");
+var _popups = require("../../utils/popups");
+var _MenuSubmenuRootContext = require("../submenu-root/MenuSubmenuRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Groups all parts of the menu.
+ * Doesn’t render its own HTML element.
+ *
+ * Documentation: [Tale UI Menu](https://base-ui.com/react/components/menu)
+ */
+const MenuRoot = exports.MenuRoot = (0, _fastHooks.fastComponent)(function MenuRoot(props) {
+  const {
+    children,
+    open: openProp,
+    onOpenChange,
+    onOpenChangeComplete,
+    defaultOpen = false,
+    disabled: disabledProp = false,
+    modal: modalProp,
+    loopFocus = true,
+    orientation = 'vertical',
+    actionsRef,
+    closeParentOnEsc = false,
+    handle,
+    triggerId: triggerIdProp,
+    defaultTriggerId: defaultTriggerIdProp = null,
+    highlightItemOnHover = true
+  } = props;
+  const contextMenuContext = (0, _ContextMenuRootContext.useContextMenuRootContext)(true);
+  const parentMenuRootContext = (0, _MenuRootContext.useMenuRootContext)(true);
+  const menubarContext = (0, _MenubarContext.useMenubarContext)(true);
+  const isSubmenu = (0, _MenuSubmenuRootContext.useMenuSubmenuRootContext)();
+  const parentFromContext = React.useMemo(() => {
+    if (isSubmenu && parentMenuRootContext) {
+      return {
+        type: 'menu',
+        store: parentMenuRootContext.store
+      };
+    }
+    if (menubarContext) {
+      return {
+        type: 'menubar',
+        context: menubarContext
+      };
+    }
+
+    // Ensure this is not a Menu nested inside ContextMenu.Trigger.
+    // ContextMenu parentContext is always undefined as ContextMenu.Root is instantiated with
+    // <MenuRootContext.Provider value={undefined}>
+    if (contextMenuContext && !parentMenuRootContext) {
+      return {
+        type: 'context-menu',
+        context: contextMenuContext
+      };
+    }
+    return {
+      type: undefined
+    };
+  }, [contextMenuContext, parentMenuRootContext, menubarContext, isSubmenu]);
+  const store = _MenuStore.MenuStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
+    parent: parentFromContext
+  });
+
+  // Support initially open state when uncontrolled
+  (0, _useOnFirstRender.useOnFirstRender)(() => {
+    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
+      store.update({
+        open: true,
+        activeTriggerId: defaultTriggerIdProp
+      });
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
+  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+  const floatingTreeRoot = store.useState('floatingTreeRoot');
+  const floatingNodeIdFromContext = (0, _floatingUiReact.useFloatingNodeId)(floatingTreeRoot);
+  const floatingParentNodeIdFromContext = (0, _floatingUiReact.useFloatingParentNodeId)();
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (contextMenuContext && !parentMenuRootContext) {
+      // This is a context menu root.
+      // It doesn't support detached triggers yet, so we have to sync the parent context manually.
+      store.update({
+        parent: {
+          type: 'context-menu',
+          context: contextMenuContext
+        },
+        floatingNodeId: floatingNodeIdFromContext,
+        floatingParentNodeId: floatingParentNodeIdFromContext
+      });
+    } else if (parentMenuRootContext) {
+      store.update({
+        floatingNodeId: floatingNodeIdFromContext,
+        floatingParentNodeId: floatingParentNodeIdFromContext
+      });
+    }
+  }, [contextMenuContext, parentMenuRootContext, floatingNodeIdFromContext, floatingParentNodeIdFromContext, store]);
+  const open = store.useState('open');
+  const activeTriggerElement = store.useState('activeTriggerElement');
+  const positionerElement = store.useState('positionerElement');
+  const hoverEnabled = store.useState('hoverEnabled');
+  const modal = store.useState('modal');
+  const disabled = store.useState('disabled');
+  const lastOpenChangeReason = store.useState('lastOpenChangeReason');
+  const parent = store.useState('parent');
+  const activeIndex = store.useState('activeIndex');
+  const payload = store.useState('payload');
+  const floatingParentNodeId = store.useState('floatingParentNodeId');
+  const openEventRef = React.useRef(null);
+  const nested = floatingParentNodeId != null;
+  let floatingEvents;
+  if (process.env.NODE_ENV !== 'production') {
+    if (parent.type !== undefined && modalProp !== undefined) {
+      console.warn('Tale UI: The `modal` prop is not supported on nested menus. It will be ignored.');
+    }
+  }
+  store.useSyncedValues({
+    disabled: disabledProp,
+    modal: parent.type === undefined ? modalProp : undefined,
+    rootId: (0, _useId.useId)()
+  });
+  const {
+    openMethod,
+    triggerProps: interactionTypeProps,
+    reset: resetOpenInteractionType
+  } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
+  (0, _popups.useImplicitActiveTrigger)(store);
+  const {
+    forceUnmount
+  } = (0, _popups.useOpenStateTransitions)(open, store, () => {
+    store.update({
+      allowMouseEnter: false,
+      stickIfOpen: true
+    });
+    resetOpenInteractionType();
+  });
+  const allowOutsidePressDismissalRef = React.useRef(parent.type !== 'context-menu');
+  const allowOutsidePressDismissalTimeout = (0, _useTimeout.useTimeout)();
+  React.useEffect(() => {
+    if (!open) {
+      openEventRef.current = null;
+    }
+    if (parent.type !== 'context-menu') {
+      return;
+    }
+    if (!open) {
+      allowOutsidePressDismissalTimeout.clear();
+      allowOutsidePressDismissalRef.current = false;
+      return;
+    }
+
+    // With `mousedown` outside press events and long press touch input, there
+    // needs to be a grace period after opening to ensure the dismissal event
+    // doesn't fire immediately after open.
+    allowOutsidePressDismissalTimeout.start(500, () => {
+      allowOutsidePressDismissalRef.current = true;
+    });
+  }, [allowOutsidePressDismissalTimeout, open, parent.type]);
+  (0, _useScrollLock.useScrollLock)(open && modal && lastOpenChangeReason !== _reasons.REASONS.triggerHover && openMethod !== 'touch', positionerElement);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!open && !hoverEnabled) {
+      store.set('hoverEnabled', true);
+    }
+  }, [open, hoverEnabled, store]);
+  const allowTouchToCloseRef = React.useRef(true);
+  const allowTouchToCloseTimeout = (0, _useTimeout.useTimeout)();
+  const setOpen = (0, _useStableCallback.useStableCallback)((nextOpen, eventDetails) => {
+    const reason = eventDetails.reason;
+    if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
+      return;
+    }
+    eventDetails.preventUnmountOnClose = () => {
+      store.set('preventUnmountingOnClose', true);
+    };
+
+    // Do not immediately reset the activeTriggerId to allow
+    // exit animations to play and focus to be returned correctly.
+    if (!nextOpen && eventDetails.trigger == null) {
+      eventDetails.trigger = activeTriggerElement ?? undefined;
+    }
+    onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    const details = {
+      open: nextOpen,
+      nativeEvent: eventDetails.event,
+      reason: eventDetails.reason,
+      nested
+    };
+    floatingEvents?.emit('openchange', details);
+    const nativeEvent = eventDetails.event;
+    if (nextOpen === false && nativeEvent?.type === 'click' && nativeEvent.pointerType === 'touch' && !allowTouchToCloseRef.current) {
+      return;
+    }
+
+    // Workaround `enableFocusInside` in Floating UI setting `tabindex=0` of a non-highlighted
+    // option upon close when tabbing out due to `keepMounted=true`:
+    // https://github.com/floating-ui/floating-ui/pull/3004/files#diff-962a7439cdeb09ea98d4b622a45d517bce07ad8c3f866e089bda05f4b0bbd875R194-R199
+    // This otherwise causes options to retain `tabindex=0` incorrectly when the popup is closed
+    // when tabbing outside.
+    if (!nextOpen && activeIndex !== null) {
+      const activeOption = store.context.itemDomElements.current[activeIndex];
+      // Wait for Floating UI's focus effect to have fired
+      queueMicrotask(() => {
+        activeOption?.setAttribute('tabindex', '-1');
+      });
+    }
+
+    // Prevent the menu from closing on mobile devices that have a delayed click event.
+    // In some cases the menu, when tapped, will fire the focus event first and then the click event.
+    // Without this guard, the menu will close immediately after opening.
+    if (nextOpen && reason === _reasons.REASONS.triggerFocus) {
+      allowTouchToCloseRef.current = false;
+      allowTouchToCloseTimeout.start(300, () => {
+        allowTouchToCloseRef.current = true;
+      });
+    } else {
+      allowTouchToCloseRef.current = true;
+      allowTouchToCloseTimeout.clear();
+    }
+    const isKeyboardClick = (reason === _reasons.REASONS.triggerPress || reason === _reasons.REASONS.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
+    const isDismissClose = !nextOpen && (reason === _reasons.REASONS.escapeKey || reason == null);
+    const updatedState = {
+      open: nextOpen,
+      openChangeReason: reason
+    };
+    openEventRef.current = eventDetails.event ?? null;
+
+    // If a popup is closing, the `trigger` may be null.
+    // We want to keep the previous value so that exit animations are played and focus is returned correctly.
+    const newTriggerId = eventDetails.trigger?.id ?? null;
+    if (newTriggerId || nextOpen) {
+      updatedState.activeTriggerId = newTriggerId;
+      updatedState.activeTriggerElement = eventDetails.trigger ?? null;
+    }
+    store.update(updatedState);
+    if (parent.type === 'menubar' && (reason === _reasons.REASONS.triggerFocus || reason === _reasons.REASONS.focusOut || reason === _reasons.REASONS.triggerHover || reason === _reasons.REASONS.listNavigation || reason === _reasons.REASONS.siblingOpen)) {
+      store.set('instantType', 'group');
+    } else if (isKeyboardClick || isDismissClose) {
+      store.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
+    } else {
+      store.set('instantType', undefined);
+    }
+  });
+  const createMenuEventDetails = React.useCallback(reason => {
+    const details = (0, _createTaleUIEventDetails.createChangeEventDetails)(reason);
+    details.preventUnmountOnClose = () => {
+      store.set('preventUnmountingOnClose', true);
+    };
+    return details;
+  }, [store]);
+  const handleImperativeClose = React.useCallback(() => {
+    store.setOpen(false, createMenuEventDetails(_reasons.REASONS.imperativeAction));
+  }, [store, createMenuEventDetails]);
+  React.useImperativeHandle(actionsRef, () => ({
+    unmount: forceUnmount,
+    close: handleImperativeClose
+  }), [forceUnmount, handleImperativeClose]);
+  let ctx;
+  if (parent.type === 'context-menu') {
+    ctx = parent.context;
+  }
+  React.useImperativeHandle(ctx?.positionerRef, () => positionerElement, [positionerElement]);
+  React.useImperativeHandle(ctx?.actionsRef, () => ({
+    setOpen
+  }), [setOpen]);
+  const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
+    popupStore: store,
+    onOpenChange: setOpen
+  });
+  floatingEvents = floatingRootContext.context.events;
+  React.useEffect(() => {
+    const handleSetOpenEvent = ({
+      open: nextOpen,
+      eventDetails
+    }) => setOpen(nextOpen, eventDetails);
+    floatingEvents.on('setOpen', handleSetOpenEvent);
+    return () => {
+      floatingEvents?.off('setOpen', handleSetOpenEvent);
+    };
+  }, [floatingEvents, setOpen]);
+  const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
+    enabled: !disabled,
+    bubbles: {
+      escapeKey: closeParentOnEsc && parent.type === 'menu'
+    },
+    outsidePress() {
+      if (parent.type !== 'context-menu' || openEventRef.current?.type === 'contextmenu') {
+        return true;
+      }
+      return allowOutsidePressDismissalRef.current;
+    },
+    externalTree: nested ? floatingTreeRoot : undefined
+  });
+  const role = (0, _floatingUiReact.useRole)(floatingRootContext, {
+    role: 'menu'
+  });
+  const direction = (0, _DirectionContext.useDirection)();
+  const setActiveIndex = React.useCallback(index => {
+    if (store.select('activeIndex') === index) {
+      return;
+    }
+    store.set('activeIndex', index);
+  }, [store]);
+  const listNavigation = (0, _floatingUiReact.useListNavigation)(floatingRootContext, {
+    enabled: !disabled,
+    listRef: store.context.itemDomElements,
+    activeIndex,
+    nested: parent.type !== undefined,
+    loopFocus,
+    orientation,
+    parentOrientation: parent.type === 'menubar' ? parent.context.orientation : undefined,
+    rtl: direction === 'rtl',
+    disabledIndices: _empty.EMPTY_ARRAY,
+    onNavigate: setActiveIndex,
+    openOnArrowKeyDown: parent.type !== 'context-menu',
+    externalTree: nested ? floatingTreeRoot : undefined,
+    focusItemOnHover: highlightItemOnHover
+  });
+  const onTypingChange = React.useCallback(nextTyping => {
+    store.context.typingRef.current = nextTyping;
+  }, [store]);
+  const typeahead = (0, _floatingUiReact.useTypeahead)(floatingRootContext, {
+    listRef: store.context.itemLabels,
+    activeIndex,
+    resetMs: _constants.TYPEAHEAD_RESET_MS,
+    onMatch: index => {
+      if (open && index !== activeIndex) {
+        store.set('activeIndex', index);
+      }
+    },
+    onTypingChange
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps,
+    getTriggerProps
+  } = (0, _floatingUiReact.useInteractions)([dismiss, role, listNavigation, typeahead]);
+  const activeTriggerProps = React.useMemo(() => {
+    const mergedProps = (0, _mergeProps.mergeProps)(getReferenceProps(), {
+      onMouseMove() {
+        store.set('allowMouseEnter', true);
+      }
+    }, interactionTypeProps);
+    delete mergedProps.role;
+    return mergedProps;
+  }, [getReferenceProps, store, interactionTypeProps]);
+  const inactiveTriggerProps = React.useMemo(() => {
+    const triggerProps = getTriggerProps();
+    if (!triggerProps) {
+      return triggerProps;
+    }
+    const mergedProps = (0, _mergeProps.mergeProps)(triggerProps, interactionTypeProps);
+    delete mergedProps.role;
+    delete mergedProps['aria-controls'];
+    return mergedProps;
+  }, [getTriggerProps, interactionTypeProps]);
+  const popupProps = React.useMemo(() => getFloatingProps({
+    onMouseMove() {
+      store.set('allowMouseEnter', true);
+      if (parent.type === 'menu') {
+        store.set('hoverEnabled', false);
+      }
+    },
+    onClick() {
+      if (store.select('hoverEnabled')) {
+        store.set('hoverEnabled', false);
+      }
+    },
+    onKeyDown(event) {
+      // The Menubar's CompositeRoot captures keyboard events via
+      // event delegation. This works well when Menu.Root is nested inside Menubar,
+      // but with detached triggers we need to manually forward the event to the CompositeRoot.
+      const relay = store.select('keyboardEventRelay');
+      if (relay && !event.isPropagationStopped()) {
+        relay(event);
+      }
+    }
+  }), [getFloatingProps, parent.type, store]);
+  const itemProps = React.useMemo(() => getItemProps(), [getItemProps]);
+  store.useSyncedValues({
+    floatingRootContext,
+    activeTriggerProps,
+    inactiveTriggerProps,
+    popupProps,
+    itemProps
+  });
+  const context = React.useMemo(() => ({
+    store,
+    parent: parentFromContext
+  }), [store, parentFromContext]);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuRootContext.MenuRootContext.Provider, {
+    value: context,
+    children: typeof children === 'function' ? children({
+      payload
+    }) : children
+  });
+  if (parent.type === undefined || parent.type === 'context-menu') {
+    // set up a FloatingTree to provide the context to nested menus
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingTree, {
+      externalTree: floatingTreeRoot,
+      children: content
+    });
+  }
+  return content;
+});
+if (process.env.NODE_ENV !== "production") MenuRoot.displayName = "MenuRoot";

package/menu/root/MenuRootContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type MenuStore } from "../store/MenuStore.js";
+import { MenuParent } from "./MenuRoot.js";
+export interface MenuRootContext<Payload = unknown> {
+  store: MenuStore<Payload>;
+  parent: MenuParent;
+}
+export declare const MenuRootContext: React.Context<MenuRootContext<unknown> | undefined>;
+export declare function useMenuRootContext(optional?: false): MenuRootContext;
+export declare function useMenuRootContext(optional: true): MenuRootContext | undefined;

package/menu/root/MenuRootContext.js

@@ -0,0 +1,19 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuRootContext = void 0;
+exports.useMenuRootContext = useMenuRootContext;
+var React = _interopRequireWildcard(require("react"));
+const MenuRootContext = exports.MenuRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") MenuRootContext.displayName = "MenuRootContext";
+function useMenuRootContext(optional) {
+  const context = React.useContext(MenuRootContext);
+  if (context === undefined && !optional) {
+    throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error('Tale UI: MenuRootContext is missing. Menu parts must be placed within <Menu.Root>.');
+  }
+  return context;
+}

package/menu/store/MenuHandle.d.ts

@@ -0,0 +1,28 @@
+import { MenuStore } from "./MenuStore.js";
+export declare class MenuHandle<Payload> {
+  /**
+   * Internal store holding the menu's state.
+   * @internal
+   */
+  readonly store: MenuStore<Payload>;
+  constructor();
+  /**
+   * Opens the menu and associates it with the trigger with the given id.
+   * The trigger must be a Menu.Trigger component with this handle passed as a prop.
+   *
+   * @param triggerId ID of the trigger to associate with the menu.
+   */
+  open(triggerId: string): void;
+  /**
+   * Closes the menu.
+   */
+  close(): void;
+  /**
+   * Indicates whether the menu is currently open.
+   */
+  get isOpen(): boolean;
+}
+/**
+ * Creates a new handle to connect a Menu.Root with detached Menu.Trigger components.
+ */
+export declare function createMenuHandle<Payload>(): MenuHandle<Payload>;

package/menu/store/MenuHandle.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuHandle = void 0;
+exports.createMenuHandle = createMenuHandle;
+var _createTaleUIEventDetails = require("../../utils/createTaleUIEventDetails");
+var _MenuStore = require("./MenuStore");
+class MenuHandle {
+  /**
+   * Internal store holding the menu's state.
+   * @internal
+   */
+
+  constructor() {
+    this.store = new _MenuStore.MenuStore();
+  }
+
+  /**
+   * Opens the menu and associates it with the trigger with the given id.
+   * The trigger must be a Menu.Trigger component with this handle passed as a prop.
+   *
+   * @param triggerId ID of the trigger to associate with the menu.
+   */
+  open(triggerId) {
+    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : undefined;
+    if (triggerId && !triggerElement) {
+      throw /* FIXME (minify-errors-in-prod): Unminified error message in production build! */new Error(`Tale UI: MenuHandle.open: No trigger found with id "${triggerId}".`);
+    }
+    this.store.setOpen(true, (0, _createTaleUIEventDetails.createChangeEventDetails)('imperative-action', undefined, triggerElement));
+  }
+
+  /**
+   * Closes the menu.
+   */
+  close() {
+    this.store.setOpen(false, (0, _createTaleUIEventDetails.createChangeEventDetails)('imperative-action', undefined, undefined));
+  }
+
+  /**
+   * Indicates whether the menu is currently open.
+   */
+  get isOpen() {
+    return this.store.state.open;
+  }
+}
+
+/**
+ * Creates a new handle to connect a Menu.Root with detached Menu.Trigger components.
+ */
+exports.MenuHandle = MenuHandle;
+function createMenuHandle() {
+  return new MenuHandle();
+}