@msviderok/base-ui-solid 1.0.0-beta.1

package/cjs/menu/group-label/MenuGroupLabel.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuGroupLabel = MenuGroupLabel;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _MenuGroupContext = require("../group/MenuGroupContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * An accessible label that is automatically associated with its parent group.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+function MenuGroupLabel(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['id']);
+  const id = (0, _useBaseUiId.useBaseUiId)(() => local.id);
+  const {
+    setLabelId
+  } = (0, _MenuGroupContext.useMenuGroupRootContext)();
+  (0, _solidJs.createRenderEffect)(() => {
+    setLabelId(id());
+  });
+  (0, _solidJs.onCleanup)(() => {
+    setLabelId(undefined);
+  });
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    props: [{
+      get id() {
+        return id();
+      },
+      role: 'presentation'
+    }, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element()
+  });
+}

package/cjs/menu/index.d.ts

@@ -0,0 +1 @@
+export * as Menu from "./index.parts.js";

package/cjs/menu/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = void 0;
+var _Menu = _interopRequireWildcard(require("./index.parts"));
+exports.Menu = _Menu;

package/cjs/menu/index.parts.d.ts

@@ -0,0 +1,18 @@
+export { Separator } from "../separator/Separator.js";
+export { MenuArrow as Arrow } from "./arrow/MenuArrow.js";
+export { MenuBackdrop as Backdrop } from "./backdrop/MenuBackdrop.js";
+export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from "./checkbox-item-indicator/MenuCheckboxItemIndicator.js";
+export { MenuCheckboxItem as CheckboxItem } from "./checkbox-item/MenuCheckboxItem.js";
+export { MenuGroupLabel as GroupLabel } from "./group-label/MenuGroupLabel.js";
+export { MenuGroup as Group } from "./group/MenuGroup.js";
+export { MenuItem as Item } from "./item/MenuItem.js";
+export { MenuPopup as Popup } from "./popup/MenuPopup.js";
+export { MenuPortal as Portal } from "./portal/MenuPortal.js";
+export { MenuPositioner as Positioner } from "./positioner/MenuPositioner.js";
+export { MenuRadioGroup as RadioGroup } from "./radio-group/MenuRadioGroup.js";
+export { MenuRadioItemIndicator as RadioItemIndicator } from "./radio-item-indicator/MenuRadioItemIndicator.js";
+export { MenuRadioItem as RadioItem } from "./radio-item/MenuRadioItem.js";
+export { MenuRoot as Root } from "./root/MenuRoot.js";
+export { MenuSubmenuRoot as SubmenuRoot } from "./submenu-root/MenuSubmenuRoot.js";
+export { MenuSubmenuTrigger as SubmenuTrigger } from "./submenu-trigger/MenuSubmenuTrigger.js";
+export { MenuTrigger as Trigger } from "./trigger/MenuTrigger.js";

package/cjs/menu/index.parts.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Arrow", {
+  enumerable: true,
+  get: function () {
+    return _MenuArrow.MenuArrow;
+  }
+});
+Object.defineProperty(exports, "Backdrop", {
+  enumerable: true,
+  get: function () {
+    return _MenuBackdrop.MenuBackdrop;
+  }
+});
+Object.defineProperty(exports, "CheckboxItem", {
+  enumerable: true,
+  get: function () {
+    return _MenuCheckboxItem.MenuCheckboxItem;
+  }
+});
+Object.defineProperty(exports, "CheckboxItemIndicator", {
+  enumerable: true,
+  get: function () {
+    return _MenuCheckboxItemIndicator.MenuCheckboxItemIndicator;
+  }
+});
+Object.defineProperty(exports, "Group", {
+  enumerable: true,
+  get: function () {
+    return _MenuGroup.MenuGroup;
+  }
+});
+Object.defineProperty(exports, "GroupLabel", {
+  enumerable: true,
+  get: function () {
+    return _MenuGroupLabel.MenuGroupLabel;
+  }
+});
+Object.defineProperty(exports, "Item", {
+  enumerable: true,
+  get: function () {
+    return _MenuItem.MenuItem;
+  }
+});
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function () {
+    return _MenuPopup.MenuPopup;
+  }
+});
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _MenuPortal.MenuPortal;
+  }
+});
+Object.defineProperty(exports, "Positioner", {
+  enumerable: true,
+  get: function () {
+    return _MenuPositioner.MenuPositioner;
+  }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function () {
+    return _MenuRadioGroup.MenuRadioGroup;
+  }
+});
+Object.defineProperty(exports, "RadioItem", {
+  enumerable: true,
+  get: function () {
+    return _MenuRadioItem.MenuRadioItem;
+  }
+});
+Object.defineProperty(exports, "RadioItemIndicator", {
+  enumerable: true,
+  get: function () {
+    return _MenuRadioItemIndicator.MenuRadioItemIndicator;
+  }
+});
+Object.defineProperty(exports, "Root", {
+  enumerable: true,
+  get: function () {
+    return _MenuRoot.MenuRoot;
+  }
+});
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function () {
+    return _Separator.Separator;
+  }
+});
+Object.defineProperty(exports, "SubmenuRoot", {
+  enumerable: true,
+  get: function () {
+    return _MenuSubmenuRoot.MenuSubmenuRoot;
+  }
+});
+Object.defineProperty(exports, "SubmenuTrigger", {
+  enumerable: true,
+  get: function () {
+    return _MenuSubmenuTrigger.MenuSubmenuTrigger;
+  }
+});
+Object.defineProperty(exports, "Trigger", {
+  enumerable: true,
+  get: function () {
+    return _MenuTrigger.MenuTrigger;
+  }
+});
+var _Separator = require("../separator/Separator");
+var _MenuArrow = require("./arrow/MenuArrow");
+var _MenuBackdrop = require("./backdrop/MenuBackdrop");
+var _MenuCheckboxItemIndicator = require("./checkbox-item-indicator/MenuCheckboxItemIndicator");
+var _MenuCheckboxItem = require("./checkbox-item/MenuCheckboxItem");
+var _MenuGroupLabel = require("./group-label/MenuGroupLabel");
+var _MenuGroup = require("./group/MenuGroup");
+var _MenuItem = require("./item/MenuItem");
+var _MenuPopup = require("./popup/MenuPopup");
+var _MenuPortal = require("./portal/MenuPortal");
+var _MenuPositioner = require("./positioner/MenuPositioner");
+var _MenuRadioGroup = require("./radio-group/MenuRadioGroup");
+var _MenuRadioItemIndicator = require("./radio-item-indicator/MenuRadioItemIndicator");
+var _MenuRadioItem = require("./radio-item/MenuRadioItem");
+var _MenuRoot = require("./root/MenuRoot");
+var _MenuSubmenuRoot = require("./submenu-root/MenuSubmenuRoot");
+var _MenuSubmenuTrigger = require("./submenu-trigger/MenuSubmenuTrigger");
+var _MenuTrigger = require("./trigger/MenuTrigger");

package/cjs/menu/item/MenuItem.d.ts

@@ -0,0 +1,46 @@
+import { type JSX } from 'solid-js';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * An individual interactive item in the menu.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export declare function MenuItem(componentProps: MenuItem.Props): JSX.Element;
+export declare namespace MenuItem {
+  interface State {
+    /**
+     * Whether the item should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the item is highlighted.
+     */
+    highlighted: boolean;
+  }
+  interface Props extends BaseUIComponentProps<'div', State> {
+    children?: JSX.Element;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Overrides the text label to use when the item is matched during keyboard text navigation.
+     */
+    label?: string;
+    /**
+     * Whether to close the menu when the item is clicked.
+     *
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+     * @default false
+     */
+    nativeButton?: boolean;
+  }
+}

package/cjs/menu/item/MenuItem.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItem = MenuItem;
+var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
+var _floatingUiSolid = require("../../floating-ui-solid");
+var _solidHelpers = require("../../solid-helpers");
+var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _MenuRootContext = require("../root/MenuRootContext");
+var _useMenuItem = require("./useMenuItem");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * An individual interactive item in the menu.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+function MenuItem(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['closeOnClick', 'disabled', 'id', 'label', 'nativeButton']);
+  const closeOnClick = () => local.closeOnClick ?? true;
+  const disabled = () => local.disabled ?? false;
+  const nativeButton = () => local.nativeButton ?? false;
+  const listItem = (0, _useCompositeListItem.useCompositeListItem)({
+    label: () => local.label
+  });
+  const {
+    itemProps,
+    activeIndex,
+    allowMouseUpTriggerRef,
+    typingRef
+  } = (0, _MenuRootContext.useMenuRootContext)();
+  const id = (0, _useBaseUiId.useBaseUiId)(() => local.id);
+  const highlighted = () => listItem.index() === activeIndex();
+  const {
+    events: menuEvents
+  } = (0, _floatingUiSolid.useFloatingTree)();
+  const {
+    getItemProps,
+    setItemRef
+  } = (0, _useMenuItem.useMenuItem)({
+    closeOnClick,
+    disabled,
+    highlighted,
+    id,
+    menuEvents,
+    allowMouseUpTriggerRef,
+    typingRef,
+    nativeButton,
+    itemMetadata: _useMenuItem.REGULAR_ITEM
+  });
+  const state = {
+    get disabled() {
+      return disabled();
+    },
+    get highlighted() {
+      return highlighted();
+    }
+  };
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: el => {
+      setItemRef(el);
+      listItem.setRef(el);
+    },
+    props: [itemProps, elementProps, getItemProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: element()
+  });
+}

package/cjs/menu/item/MenuItemDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum MenuItemDataAttributes {
+  /**
+   * Present when the menu item is highlighted.
+   */
+  highlighted = "data-highlighted",
+  /**
+   * Present when the menu item is disabled.
+   */
+  disabled = "data-disabled",
+}

package/cjs/menu/item/MenuItemDataAttributes.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItemDataAttributes = void 0;
+let MenuItemDataAttributes = exports.MenuItemDataAttributes = /*#__PURE__*/function (MenuItemDataAttributes) {
+  /**
+   * Present when the menu item is highlighted.
+   */
+  MenuItemDataAttributes["highlighted"] = "data-highlighted";
+  /**
+   * Present when the menu item is disabled.
+   */
+  MenuItemDataAttributes["disabled"] = "data-disabled";
+  return MenuItemDataAttributes;
+}({});

package/cjs/menu/item/useMenuItem.d.ts

@@ -0,0 +1,68 @@
+import type { Accessor } from 'solid-js';
+import { FloatingEvents } from "../../floating-ui-solid/index.js";
+import { MaybeAccessor } from "../../solid-helpers.js";
+import { type BaseUIHTMLProps } from "../../utils/types.js";
+export declare const REGULAR_ITEM: {
+  type: "regular-item";
+};
+export declare function useMenuItem(params: useMenuItem.Parameters): useMenuItem.ReturnValue;
+export declare namespace useMenuItem {
+  interface Parameters {
+    /**
+     * Whether to close the menu when the item is clicked.
+     */
+    closeOnClick: MaybeAccessor<boolean>;
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: MaybeAccessor<boolean>;
+    /**
+     * Determines if the menu item is highlighted.
+     */
+    highlighted: MaybeAccessor<boolean>;
+    /**
+     * The id of the menu item.
+     */
+    id: MaybeAccessor<string | undefined>;
+    /**
+     * The FloatingEvents instance of the menu's root.
+     */
+    menuEvents: FloatingEvents;
+    /**
+     * Whether to treat mouseup events as clicks.
+     */
+    allowMouseUpTriggerRef: Accessor<boolean>;
+    /**
+     * A ref that is set to `true` when the user is using the typeahead feature.
+     */
+    typingRef: Accessor<boolean>;
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+     * @default false
+     */
+    nativeButton: MaybeAccessor<boolean>;
+    /**
+     * Additional data specific to the item type.
+     */
+    itemMetadata: Metadata;
+  }
+  type Metadata = typeof REGULAR_ITEM | {
+    type: 'submenu-trigger';
+    setActive: () => void;
+    allowMouseEnterEnabled: boolean;
+  };
+  interface ReturnValue {
+    /**
+     * Resolver for the root slot's props.
+     * @param externalProps event handlers for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getItemProps: (externalProps?: BaseUIHTMLProps) => BaseUIHTMLProps;
+    /**
+     * The ref to the component's root DOM element.
+     */
+    setItemRef: (el: HTMLElement | null | undefined) => void;
+  }
+}

package/cjs/menu/item/useMenuItem.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.REGULAR_ITEM = void 0;
+exports.useMenuItem = useMenuItem;
+var _mergeProps = require("../../merge-props");
+var _solidHelpers = require("../../solid-helpers");
+var _useButton = require("../../use-button");
+const REGULAR_ITEM = exports.REGULAR_ITEM = {
+  type: 'regular-item'
+};
+function useMenuItem(params) {
+  const closeOnClick = () => (0, _solidHelpers.access)(params.closeOnClick);
+  const disabled = () => (0, _solidHelpers.access)(params.disabled) ?? false;
+  const highlighted = () => (0, _solidHelpers.access)(params.highlighted);
+  const id = () => (0, _solidHelpers.access)(params.id);
+  const allowMouseUpTriggerRef = () => (0, _solidHelpers.access)(params.allowMouseUpTriggerRef);
+  const typingRef = () => (0, _solidHelpers.access)(params.typingRef);
+  const nativeButton = () => (0, _solidHelpers.access)(params.nativeButton);
+  let itemRef = null;
+  const {
+    getButtonProps,
+    buttonRef
+  } = (0, _useButton.useButton)({
+    disabled,
+    focusableWhenDisabled: true,
+    native: nativeButton
+  });
+  const getItemProps = (externalProps = {}) => {
+    return (0, _mergeProps.mergeProps)([{
+      role: 'menuitem',
+      get id() {
+        return id();
+      },
+      get tabIndex() {
+        return highlighted() ? 0 : -1;
+      },
+      onMouseEnter() {
+        const metadata = params.itemMetadata;
+        if (metadata.type !== 'submenu-trigger') {
+          return;
+        }
+        metadata.setActive();
+      },
+      onKeyUp: event => {
+        if (event.key === ' ' && typingRef()) {
+          event.preventBaseUIHandler();
+        }
+      },
+      /**
+       * TODO: this is needed in order to propagate the keydown event to the button
+       * (for example, test MenuRadioItem#L162-L190 for "Enter" key)
+       */
+      onKeyDown: () => {},
+      onClick: event => {
+        if (closeOnClick()) {
+          params.menuEvents.emit('close', {
+            domEvent: event,
+            reason: 'item-press'
+          });
+        }
+      },
+      onMouseUp: () => {
+        if (itemRef && allowMouseUpTriggerRef()) {
+          // This fires whenever the user clicks on the trigger, moves the cursor, and releases it over the item.
+          // We trigger the click and override the `closeOnClick` preference to always close the menu.
+          if (params.itemMetadata.type === 'regular-item') {
+            itemRef.click();
+          }
+        }
+      }
+    }, externalProps, getButtonProps]);
+  };
+  return {
+    getItemProps,
+    setItemRef: el => {
+      itemRef = el;
+      buttonRef(el);
+    }
+  };
+}

package/cjs/menu/popup/MenuPopup.d.ts

@@ -0,0 +1,33 @@
+import { type JSX } from 'solid-js';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { Side } from "../../utils/useAnchorPositioning.js";
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { type InstantType } from "../root/MenuRootContext.js";
+/**
+ * A container for the menu items.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+export declare function MenuPopup(componentProps: MenuPopup.Props): JSX.Element;
+export declare namespace MenuPopup {
+  interface Props extends BaseUIComponentProps<'div', State> {
+    children?: JSX.Element;
+    /**
+     * Determines the element to focus when the menu is closed.
+     * By default, focus returns to the trigger.
+     */
+    finalFocus?: HTMLElement | null | undefined;
+  }
+  type State = {
+    transitionStatus: TransitionStatus;
+    side: Side;
+    align: 'start' | 'end' | 'center';
+    /**
+     * Whether the menu is currently open.
+     */
+    open: boolean;
+    nested: boolean;
+    instant: InstantType | undefined;
+  };
+}

package/cjs/menu/popup/MenuPopup.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuPopup = MenuPopup;
+var _solidJs = require("solid-js");
+var _floatingUiSolid = require("../../floating-ui-solid");
+var _solidHelpers = require("../../solid-helpers");
+var _constants = require("../../utils/constants");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+var _styleHookMapping = require("../../utils/styleHookMapping");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _MenuPositionerContext = require("../positioner/MenuPositionerContext");
+var _MenuRootContext = require("../root/MenuRootContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const customStyleHookMapping = {
+  ..._popupStateMapping.popupStateMapping,
+  ..._styleHookMapping.transitionStatusMapping
+};
+
+/**
+ * A container for the menu items.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+ */
+function MenuPopup(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['finalFocus']);
+  const {
+    open,
+    setOpen,
+    transitionStatus,
+    popupProps,
+    mounted,
+    instantType,
+    onOpenChangeComplete,
+    parent,
+    lastOpenChangeReason,
+    rootId,
+    popupRef,
+    setPopupRef
+  } = (0, _MenuRootContext.useMenuRootContext)();
+  const {
+    side,
+    align,
+    floatingContext
+  } = (0, _MenuPositionerContext.useMenuPositionerContext)();
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    open,
+    ref: popupRef,
+    onComplete() {
+      if (open()) {
+        onOpenChangeComplete?.(true);
+      }
+    }
+  });
+  const {
+    events: menuEvents
+  } = (0, _floatingUiSolid.useFloatingTree)();
+  function handleClose(event) {
+    setOpen(false, event.domEvent, event.reason);
+  }
+  (0, _solidJs.onMount)(() => {
+    menuEvents.on('close', handleClose);
+    (0, _solidJs.onCleanup)(() => {
+      menuEvents.off('close', handleClose);
+    });
+  });
+  const state = {
+    get transitionStatus() {
+      return transitionStatus();
+    },
+    get side() {
+      return side();
+    },
+    get align() {
+      return align();
+    },
+    get open() {
+      return open();
+    },
+    get nested() {
+      return parent().type === 'menu';
+    },
+    get instant() {
+      return instantType();
+    }
+  };
+  const returnFocus = (0, _solidJs.createMemo)(() => {
+    if (parent().type === 'menubar' && lastOpenChangeReason() !== 'outside-press') {
+      return true;
+    }
+    return parent().type === undefined || parent().type === 'context-menu';
+  });
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: setPopupRef,
+    customStyleHookMapping,
+    props: [popupProps, {
+      get style() {
+        return transitionStatus() === 'starting' ? _constants.DISABLED_TRANSITIONS_STYLE.style : undefined;
+      }
+    }, elementProps, {
+      get ['data-rootownerid']() {
+        return rootId();
+      }
+    }]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiSolid.FloatingFocusManager, {
+    context: floatingContext,
+    modal: false,
+    disabled: !mounted(),
+    returnFocus: local.finalFocus || returnFocus(),
+    initialFocus: parent().type === 'menu' ? -1 : 0,
+    restoreFocus: true,
+    children: element()
+  });
+}