@zag-js/menubar 2.0.0-next.1

package/dist/menubar.types.d.ts

@@ -0,0 +1,106 @@
+import { Machine, EventObject, Service } from '@zag-js/core';
+import { TypeaheadState } from '@zag-js/dom-query';
+import { PropTypes, Orientation, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
+export { Orientation } from '@zag-js/types';
+
+/**
+ * The reason a menu within the menubar closed. Used to decide whether the menubar
+ * should keep `hasOpenMenu` active (another menu is about to open) or reset it.
+ */
+type MenuCloseReason = "escape" | "click-outside" | "sibling-open" | "item-select" | "list-navigation";
+/**
+ * The custom DOM events menus dispatch on the menubar element to coordinate.
+ * Coordination is intentionally DOM-based — no imports between the menu and menubar packages.
+ */
+interface MenubarEventMap {
+    "menu:open": CustomEvent<{
+        menuId: string;
+    }>;
+    "menu:close": CustomEvent<{
+        menuId: string;
+        reason: MenuCloseReason;
+    }>;
+    "menu:focus-next": CustomEvent<void>;
+    "menu:focus-prev": CustomEvent<void>;
+}
+type ElementIds = Partial<{
+    root: string;
+}>;
+interface MenubarProps extends DirectionProperty, CommonProperties {
+    /**
+     * The ids of the elements in the menubar. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * The orientation of the menubar.
+     * @default "horizontal"
+     */
+    orientation?: Orientation | undefined;
+    /**
+     * Whether to loop the keyboard navigation across the triggers.
+     * @default true
+     */
+    loopFocus?: boolean | undefined;
+    /**
+     * Whether the menubar (and all its menu triggers) is disabled.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+type PropsWithDefault = "orientation" | "loopFocus";
+interface MenubarContext {
+    /**
+     * The id of the currently focused/tabbable trigger (roving tabindex).
+     */
+    activeId: string | null;
+    /**
+     * Whether any menu within the menubar is currently open.
+     */
+    hasOpenMenu: boolean;
+}
+interface MenubarSchema {
+    props: RequiredBy<MenubarProps, PropsWithDefault>;
+    context: MenubarContext;
+    refs: {
+        typeaheadState: TypeaheadState;
+    };
+    state: "idle" | "focused" | "open";
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+}
+type MenubarService = Service<MenubarSchema>;
+type MenubarMachine = Machine<MenubarSchema>;
+/**
+ * Config to pass to a child menu's `menubar` prop so it behaves as a menubar menu.
+ * Structurally matches the `MenubarContext` type from `@zag-js/menu`.
+ */
+interface MenubarMenuContext {
+    rootId: string;
+    disabled: boolean;
+    orientation: Orientation;
+    activeId: string | null;
+}
+interface MenubarApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether any menu within the menubar is open.
+     */
+    hasOpenMenu: boolean;
+    /**
+     * The orientation of the menubar.
+     */
+    orientation: Orientation;
+    /**
+     * Whether the menubar is disabled.
+     */
+    disabled: boolean;
+    getRootProps: () => T["element"];
+    /**
+     * Returns the config to pass to each top-level menu's `menubar` prop. Adapters
+     * usually expose this via a context so nested `<Menu>`s can read it.
+     */
+    getMenuContext: () => MenubarMenuContext;
+}
+
+export type { ElementIds, MenuCloseReason, MenubarApi, MenubarEventMap, MenubarMachine, MenubarMenuContext, MenubarProps, MenubarSchema, MenubarService };

package/dist/menubar.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menubar.types.ts
+var menubar_types_exports = {};
+module.exports = __toCommonJS(menubar_types_exports);

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@zag-js/menubar",
+  "version": "2.0.0-next.1",
+  "description": "Core logic for the menubar widget implemented as a state machine",
+  "keywords": [
+    "js",
+    "machine",
+    "xstate",
+    "statechart",
+    "component",
+    "chakra-ui",
+    "menubar"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/zag#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/menubar"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/zag/issues"
+  },
+  "dependencies": {
+    "@zag-js/anatomy": "2.0.0-next.1",
+    "@zag-js/dom-query": "2.0.0-next.1",
+    "@zag-js/utils": "2.0.0-next.1",
+    "@zag-js/core": "2.0.0-next.1",
+    "@zag-js/types": "2.0.0-next.1"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0"
+  },
+  "clean-package": "./clean-package.config.json",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./anatomy": {
+      "import": {
+        "types": "./dist/menubar.anatomy.d.mts",
+        "default": "./dist/menubar.anatomy.mjs"
+      },
+      "require": {
+        "types": "./dist/menubar.anatomy.d.ts",
+        "default": "./dist/menubar.anatomy.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit"
+  }
+}