@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/menu.d.ts

@@ -0,0 +1,116 @@
+import { type MenuCheckboxItemProps, type MenuCheckboxItemState, type MenuContentProps, type MenuContentState, type MenuContextTriggerProps, type MenuContextTriggerState, type MenuData, type MenuItemIconProps, type MenuItemIconState, type MenuItemIndicatorProps, type MenuItemIndicatorState, type MenuItemProps, type MenuItemState, type MenuOptions, type MenuRadioGroupProps, type MenuRadioGroupState, type MenuRadioItemProps, type MenuRadioItemState, type MenuSubTriggerProps, type MenuTriggerProps, type MenuTriggerState } from "@ui-sdk/core/menu";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type Clashing = "value" | "defaultValue" | "onChange" | "onSelect" | "defaultChecked";
+/**
+ * The props of `Menu`.
+ * @stable
+ */
+type MenuProps = MenuOptions & {
+    children?: React.ReactNode;
+};
+/**
+ * A list of actions and options, opened from a button or a right-click. Put its trigger and content inside.
+ * @stable
+ */
+declare function Menu({ children, items, container, ...options }: MenuProps): React.JSX.Element;
+type TriggerProps = MenuTriggerProps;
+/**
+ * The button that opens the menu. A trigger outside the menu connects through `controller`.
+ * @stable
+ */
+declare function MenuTrigger({ controller, ...props }: Omit<PartProps<"button", MenuTriggerState>, Clashing> & TriggerProps): React.JSX.Element;
+/**
+ * An area that opens the menu at the pointer on a right-click or a long press, and on Shift+F10.
+ * @stable
+ */
+declare function MenuContextTrigger({ controller, ...props }: PartProps<"div", MenuContextTriggerState> & MenuContextTriggerProps): React.JSX.Element;
+/**
+ * The popup that holds the items, positioned against the trigger that opened it.
+ * @stable
+ */
+declare function MenuContent<Payload = unknown>({ side, align, sideOffset, alignOffset, collisionPadding, arrowPadding, anchor, finalFocus, keepMounted, container, render, ...props }: PartProps<"div", MenuContentState<Payload>> & MenuContentProps): React.JSX.Element | null;
+/**
+ * An action. Pressing it runs its `onSelect` and closes the menu, unless `closeOnSelect` is false.
+ * @stable
+ */
+declare function MenuItem({ value, label, disabled, shortcut, closeOnSelect, destructive, onSelect, render, children, ...props }: Omit<PartProps<"div", MenuItemState>, Clashing> & MenuItemProps): React.JSX.Element | null;
+/**
+ * Shows the keys of an item's shortcut, like `⌘S`, inside the item. Hidden from screen readers.
+ * @stable
+ */
+declare const MenuShortcut: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/menu").MenuPrimitive, "shortcut", "span">;
+/**
+ * An item that checks and unchecks an option.
+ * @stable
+ */
+declare function MenuCheckboxItem({ value, label, disabled, checked, defaultChecked, onCheckedChange, closeOnSelect, render, ...props }: Omit<PartProps<"div", MenuCheckboxItemState>, Clashing> & MenuCheckboxItemProps): React.JSX.Element;
+/**
+ * Radio items that share one value. `T` is inferred from `value`, `defaultValue` or `onValueChange`.
+ * @stable
+ */
+declare function MenuRadioGroup<T extends string = string>({ name, value, defaultValue, onValueChange, render, ...props }: Omit<PartProps<"div", MenuRadioGroupState>, Clashing> & MenuRadioGroupProps<T>): React.JSX.Element | null;
+/**
+ * An item in a `MenuRadioGroup`. Pressing it checks its value.
+ * @stable
+ */
+declare function MenuRadioItem({ value, label, disabled, closeOnSelect, render, ...props }: Omit<PartProps<"div", MenuRadioItemState>, Clashing> & MenuRadioItemProps): React.JSX.Element;
+/**
+ * The check or dot inside a checkbox or radio item. Rendered while the item is checked, or always with `keepMounted`.
+ * @stable
+ */
+declare function MenuItemIndicator({ keepMounted, render, ...props }: PartProps<"span", MenuItemIndicatorState> & MenuItemIndicatorProps): React.JSX.Element | null;
+/**
+ * An icon inside an item or a submenu trigger. Screen readers and typeahead skip it, and `mirror`
+ * flips it in right-to-left text.
+ * @stable
+ */
+declare function MenuItemIcon({ mirror, render, ...props }: PartProps<"span", MenuItemIconState> & MenuItemIconProps): React.JSX.Element | null;
+/**
+ * A group of items, named by its `MenuGroupLabel`.
+ * @stable
+ */
+declare function MenuGroup(props: PartProps<"div">): React.JSX.Element;
+/**
+ * The group's heading, which names the group.
+ * @stable
+ */
+declare function MenuGroupLabel({ render, ...props }: PartProps<"div">): React.JSX.Element | null;
+/**
+ * A line between items or groups.
+ * @stable
+ */
+declare const MenuSeparator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/menu").MenuPrimitive, "separator", "div">;
+/**
+ * The props of `MenuSub`.
+ * @stable
+ */
+type MenuSubProps = Pick<MenuOptions, "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete" | "loop" | "delay" | "controller" | "debug"> & {
+    children?: React.ReactNode;
+};
+/**
+ * A submenu. Put its `MenuSubTrigger` and `MenuSubContent` inside, in a menu's content.
+ * @stable
+ */
+declare function MenuSub({ children, ...options }: MenuSubProps): React.JSX.Element;
+/**
+ * The item that opens its submenu.
+ * @stable
+ */
+declare function MenuSubTrigger({ disabled, ...props }: Omit<PartProps<"div", MenuTriggerState>, Clashing> & MenuSubTriggerProps): React.JSX.Element | null;
+/**
+ * The submenu's popup, positioned beside its trigger.
+ * @stable
+ */
+declare const MenuSubContent: typeof MenuContent;
+/**
+ * Renders a data menu's items as bare parts. Used by `<Menu items>` when you place no `MenuContent`
+ * of your own, and available for custom layouts.
+ * @stable
+ */
+declare function MenuItems({ items }: {
+    items: MenuData;
+}): React.JSX.Element[];
+export { createMenuController } from "@ui-sdk/core/menu";
+export type { MenuApi, MenuCheckboxItemProps, MenuCheckboxItemState, MenuActionDetails, MenuCheckedChangeDetails, MenuCheckedChangeReason, MenuContentProps, MenuContentState, MenuContextTriggerProps, MenuContextTriggerState, MenuController, MenuData, MenuDataItem, MenuDismissReason, MenuFinalFocus, MenuItemIconProps, MenuItemIconState, MenuItemIndicatorProps, MenuItemIndicatorState, MenuItemProps, MenuItemState, MenuOpenChangeReason, MenuOpenOptions, MenuOptions, MenuPayloadChangeReason, MenuPrimitive, MenuRadioGroupProps, MenuRadioGroupState, MenuRadioItemProps, MenuRadioItemState, MenuSubTriggerProps, MenuTriggerProps, MenuTriggerState, MenuValueChangeDetails, MenuValueChangeReason, } from "@ui-sdk/core/menu";
+export { Menu, MenuCheckboxItem, MenuContent, MenuContextTrigger, MenuGroup, MenuGroupLabel, MenuItem, MenuItemIcon, MenuItemIndicator, MenuItems, type MenuProps, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, type MenuSubProps, MenuSubTrigger, MenuTrigger, };

package/dist/menu.js

@@ -0,0 +1,426 @@
+"use client";
+// src/menu.tsx
+import { formatShortcut } from "@ui-sdk/core";
+import {
+  menu as menuPrimitive
+} from "@ui-sdk/core/menu";
+import {
+  menuCheckable,
+  menuContextTrigger,
+  menuItemIcons
+} from "@ui-sdk/core/renderer";
+import * as React from "react";
+import { hasChild, Placed, usePlaceContent, usePlacedContent } from "./children.js";
+import { MenubarContext } from "./menubar-context.js";
+import {
+  Connected,
+  renderPopup,
+  sheetViewport,
+  useOwnContainer,
+  usePopupContainer,
+  useControllerEntry
+} from "./popup.js";
+import {
+  createParts,
+  HandleScope,
+  reading,
+  renderElement,
+  sharesProps,
+  useAround,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createMenuController } from "@ui-sdk/core/menu";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(menuPrimitive, {
+  trigger: "button",
+  shortcut: "span",
+  separator: "div"
+});
+sharesProps(menuPrimitive, "radio-group");
+var ContainerContext = React.createContext(void 0);
+var GroupContext = React.createContext(null);
+var ItemContext = React.createContext(null);
+function useMenu() {
+  return useHandle(menuPrimitive);
+}
+function useRadioGroup() {
+  return useAround(menuPrimitive, "radio-group")?.name;
+}
+function Menu({ children, items, container, ...options }) {
+  const menubar = React.useContext(MenubarContext);
+  const menu = usePrimitive(menuPrimitive, {
+    items,
+    ...options,
+    menubar: menubar ? reading(menubar, () => menubar.api) : void 0
+  });
+  useControllerEntry(options.controller, menu);
+  const found = hasChild(children, MenuContent);
+  const [placed, place] = usePlacedContent(!!items && !found);
+  const own = placed || found;
+  return /* @__PURE__ */ jsx(HandleScope, { handle: menu, children: /* @__PURE__ */ jsxs(ContainerContext.Provider, { value: container, children: [
+    /* @__PURE__ */ jsx(MenubarContext.Provider, { value: null, children: /* @__PURE__ */ jsx(Placed, { value: place, children }) }),
+    /* @__PURE__ */ jsx(Placed, { value: null, children: items && !own && /* @__PURE__ */ jsx(MenuContent, { children: /* @__PURE__ */ jsx(MenuItems, { items }) }) })
+  ] }) });
+}
+function MenuTrigger({
+  controller,
+  ...props
+}) {
+  const {
+    disabled,
+    focusableWhenDisabled,
+    payload: _,
+    shortcut: __,
+    render,
+    ...rest
+  } = props;
+  const unconnected = () => renderElement(
+    "button",
+    {
+      type: "button",
+      disabled: disabled && !focusableWhenDisabled,
+      "aria-disabled": disabled && focusableWhenDisabled || void 0,
+      ...rest
+    },
+    render,
+    {
+      open: false,
+      disabled: !!disabled
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: menuPrimitive,
+      controller,
+      fallback: unconnected,
+      children: /* @__PURE__ */ jsx(parts.Trigger, { ...props })
+    }
+  );
+}
+function MenuContextTrigger({
+  controller,
+  ...props
+}) {
+  const { disabled, payload: _, render, ...rest } = props;
+  const unconnected = () => renderElement("div", rest, render, { open: false, disabled: !!disabled });
+  return /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: menuPrimitive,
+      controller,
+      fallback: unconnected,
+      children: /* @__PURE__ */ jsx(ContextTriggerPart, { ...props })
+    }
+  );
+}
+function ContextTriggerPart({
+  disabled,
+  payload,
+  ...props
+}) {
+  const menu = useMenu();
+  menu.instance.use(menuContextTrigger);
+  return usePart(
+    menu,
+    "context-trigger",
+    { id: React.useId(), disabled, payload },
+    props
+  );
+}
+function MenuContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  arrowPadding,
+  anchor,
+  finalFocus,
+  keepMounted,
+  container,
+  render,
+  ...props
+}) {
+  usePlaceContent();
+  const menu = useMenu();
+  const target = usePopupContainer(useOwnContainer(container, ContainerContext));
+  const content = {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    arrowPadding,
+    anchor,
+    finalFocus,
+    keepMounted
+  };
+  const nested = menu.api.root() !== menu.api;
+  const partProps = {
+    ...props,
+    render: nested ? render : sheetViewport(menu, render)
+  };
+  const element = usePart(menu, "content", content, partProps);
+  return element && (nested ? element : renderPopup(element, target));
+}
+function MenuItem({
+  value,
+  label,
+  disabled,
+  shortcut,
+  closeOnSelect,
+  destructive,
+  onSelect,
+  render,
+  children,
+  ...props
+}) {
+  const menu = useMenu();
+  const id = React.useId();
+  const item = {
+    id,
+    value,
+    label,
+    disabled,
+    shortcut,
+    closeOnSelect,
+    destructive,
+    onSelect
+  };
+  const content = (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    typeof children === "function" ? children(state) : children,
+    shortcut && /* @__PURE__ */ jsx(MenuShortcut, { children: formatShortcut(shortcut, menu.state.apple) })
+  ] });
+  return usePart(menu, "item", item, { ...props, children: content, render });
+}
+var MenuShortcut = parts.Shortcut;
+function MenuCheckboxItem({
+  value,
+  label,
+  disabled,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  closeOnSelect,
+  render,
+  ...props
+}) {
+  const menu = useMenu();
+  menu.instance.use(menuCheckable);
+  const item = {
+    value,
+    label,
+    disabled,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    closeOnSelect
+  };
+  const indicator = React.useMemo(
+    () => ({ item: "checkbox-item", itemKey: value }),
+    [value]
+  );
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value: indicator, children: usePart(menu, "checkbox-item", item, { ...props, render }) });
+}
+function MenuRadioGroup({
+  name,
+  value,
+  defaultValue,
+  onValueChange,
+  render,
+  ...props
+}) {
+  const menu = useMenu();
+  menu.instance.use(menuCheckable);
+  const generated = React.useId();
+  const group = name ?? generated;
+  const part = {
+    id: group,
+    name: group,
+    value,
+    defaultValue,
+    onValueChange
+  };
+  return usePart(menu, "radio-group", part, { ...props, render });
+}
+function MenuRadioItem({
+  value,
+  label,
+  disabled,
+  closeOnSelect,
+  render,
+  ...props
+}) {
+  const menu = useMenu();
+  menu.instance.use(menuCheckable);
+  const group = useRadioGroup();
+  const item = { group: group ?? "", value, label, disabled, closeOnSelect };
+  const indicator = React.useMemo(
+    () => ({ item: "radio-item", itemKey: value, group: group ?? "" }),
+    [value, group]
+  );
+  if (!group) {
+    throw new Error("<MenuRadioItem> must be used inside <MenuRadioGroup>.");
+  }
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value: indicator, children: usePart(menu, "radio-item", item, { ...props, render }) });
+}
+function MenuItemIndicator({
+  keepMounted,
+  render,
+  ...props
+}) {
+  const menu = useMenu();
+  menu.instance.use(menuCheckable);
+  const id = React.useId();
+  const item = React.useContext(ItemContext);
+  if (!item) {
+    throw new Error(
+      "<MenuItemIndicator> must be used inside a checkbox or radio item."
+    );
+  }
+  const indicator = { id, ...item, keepMounted };
+  return usePart(
+    menu,
+    "item-indicator",
+    indicator,
+    { ...props, render },
+    "span"
+  );
+}
+function MenuItemIcon({
+  mirror,
+  render,
+  ...props
+}) {
+  const menu = useMenu();
+  menu.instance.use(menuItemIcons);
+  const part = { id: React.useId(), mirror };
+  return usePart(menu, "item-icon", part, { ...props, render }, "span");
+}
+function MenuGroup(props) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(GroupContext.Provider, { value: id, children: usePart(useMenu(), "group", { id }, props) });
+}
+function MenuGroupLabel({ render, ...props }) {
+  const menu = useMenu();
+  const radioGroup = useRadioGroup();
+  const plainGroup = React.useContext(GroupContext);
+  const group = radioGroup ?? plainGroup;
+  if (!group) {
+    throw new Error(
+      "<MenuGroupLabel> must be used inside <MenuGroup> or <MenuRadioGroup>."
+    );
+  }
+  return usePart(
+    menu,
+    "group-label",
+    { id: group, group },
+    { ...props, render },
+    "div"
+  );
+}
+var MenuSeparator = parts.Separator;
+function MenuSub({ children, ...options }) {
+  const parent = useMenu();
+  const menu = usePrimitive(menuPrimitive, { ...options, parent: parent.api });
+  return /* @__PURE__ */ jsx(HandleScope, { handle: menu, children });
+}
+function MenuSubTrigger({
+  disabled,
+  ...props
+}) {
+  return usePart(useMenu(), "trigger", { disabled }, props);
+}
+var MenuSubContent = MenuContent;
+function MenuItems({ items }) {
+  return items.map((entry, index) => {
+    const item = typeof entry === "string" ? { value: entry, label: entry } : entry;
+    switch (item.type) {
+      case void 0:
+      case "item":
+        return /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            shortcut: item.shortcut,
+            closeOnSelect: item.closeOnSelect,
+            destructive: item.destructive,
+            children: item.label
+          },
+          item.value
+        );
+      case "separator":
+        return /* @__PURE__ */ jsx(MenuSeparator, {}, `separator-${index}`);
+      case "group":
+        return /* @__PURE__ */ jsxs(MenuGroup, { children: [
+          item.label && /* @__PURE__ */ jsx(MenuGroupLabel, { children: item.label }),
+          /* @__PURE__ */ jsx(MenuItems, { items: item.items })
+        ] }, `group-${index}`);
+      case "checkbox":
+        return /* @__PURE__ */ jsx(
+          MenuCheckboxItem,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            checked: item.checked,
+            defaultChecked: item.defaultChecked,
+            closeOnSelect: item.closeOnSelect,
+            children: item.label
+          },
+          item.value
+        );
+      case "radio-group":
+        return /* @__PURE__ */ jsxs(
+          MenuRadioGroup,
+          {
+            name: item.name,
+            value: item.value,
+            defaultValue: item.defaultValue,
+            children: [
+              item.label && /* @__PURE__ */ jsx(MenuGroupLabel, { children: item.label }),
+              item.items.map((radio) => /* @__PURE__ */ jsx(
+                MenuRadioItem,
+                {
+                  value: radio.value,
+                  disabled: radio.disabled,
+                  children: radio.label
+                },
+                radio.value
+              ))
+            ]
+          },
+          item.name
+        );
+      case "submenu":
+        return /* @__PURE__ */ jsxs(MenuSub, { children: [
+          /* @__PURE__ */ jsx(MenuSubTrigger, { disabled: item.disabled, children: item.label }),
+          /* @__PURE__ */ jsx(MenuSubContent, { children: /* @__PURE__ */ jsx(MenuItems, { items: item.items }) })
+        ] }, `submenu-${index}`);
+    }
+  });
+}
+export {
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuContextTrigger,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemIcon,
+  MenuItemIndicator,
+  MenuItems,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+  createMenuController
+};

package/dist/menubar-context.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import type { PrimitiveHandle } from "./use-primitive.js";
+declare const MenubarContext: React.Context<PrimitiveHandle<import("@ui-sdk/core/menubar").MenubarPrimitive> | null>;
+export { MenubarContext };

package/dist/menubar-context.js

@@ -0,0 +1,7 @@
+"use client";
+// src/menubar-context.ts
+import * as React from "react";
+var MenubarContext = React.createContext(null);
+export {
+  MenubarContext
+};

package/dist/menubar.d.ts

@@ -0,0 +1,11 @@
+import { type MenubarOptions, type MenubarState } from "@ui-sdk/core/menubar";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * A row of menus, like a desktop app's: one tab stop, arrow keys between the
+ * triggers and between open menus. Each `Menu` inside joins it.
+ * @stable
+ */
+declare function Menubar({ orientation, loop, disabled, modal, controller, debug, ...props }: MenubarOptions & PartProps<"div", MenubarState>): import("react").JSX.Element;
+export { createMenubarController } from "@ui-sdk/core/menubar";
+export type { MenubarApi, MenubarController, MenubarMember, MenubarOptions, MenubarOrientation, MenubarPrimitive, MenubarState, } from "@ui-sdk/core/menubar";
+export { Menubar };

package/dist/menubar.js

@@ -0,0 +1,32 @@
+"use client";
+// src/menubar.tsx
+import {
+  menubar as menubarPrimitive
+} from "@ui-sdk/core/menubar";
+import { MenubarContext } from "./menubar-context.js";
+import { usePart, usePrimitive } from "./use-primitive.js";
+import { createMenubarController } from "@ui-sdk/core/menubar";
+import { jsx } from "react/jsx-runtime";
+function Menubar({
+  orientation,
+  loop,
+  disabled,
+  modal,
+  controller,
+  debug,
+  ...props
+}) {
+  const menubar = usePrimitive(menubarPrimitive, {
+    orientation,
+    loop,
+    disabled,
+    modal,
+    controller,
+    debug
+  });
+  return /* @__PURE__ */ jsx(MenubarContext.Provider, { value: menubar, children: usePart(menubar, "root", {}, props) });
+}
+export {
+  Menubar,
+  createMenubarController
+};