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

package/cjs/composite/list/CompositeListContext.d.ts

@@ -0,0 +1,17 @@
+import { type Accessor } from 'solid-js';
+import type { MaybeAccessor } from "../../solid-helpers.js";
+import type { CompositeMetadata } from "./CompositeList.js";
+export interface CompositeListContextValue<Metadata> {
+  register: (node: Element, metadata: MaybeAccessor<Metadata>) => void;
+  unregister: (node: Element) => void;
+  subscribeMapChange: (fn: (map: Map<Element, CompositeMetadata<Metadata> | null>) => void) => void;
+  unsubscribeMapChange: (fn: (map: Map<Element, CompositeMetadata<Metadata> | null>) => void) => void;
+  refs: {
+    elements: Array<HTMLElement | null | undefined>;
+    labels?: Array<string | null>;
+  };
+  nextIndex: Accessor<number>;
+  setNextIndex: (nextIndex: number) => void;
+}
+export declare const CompositeListContext: import("solid-js").Context<CompositeListContextValue<any>>;
+export declare function useCompositeListContext(): CompositeListContextValue<any>;

package/cjs/composite/list/CompositeListContext.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompositeListContext = void 0;
+exports.useCompositeListContext = useCompositeListContext;
+var _solidJs = require("solid-js");
+const CompositeListContext = exports.CompositeListContext = (0, _solidJs.createContext)({
+  register: () => {},
+  unregister: () => {},
+  subscribeMapChange: () => {
+    return () => {};
+  },
+  unsubscribeMapChange: () => {
+    return () => {};
+  },
+  refs: {
+    elements: []
+  },
+  nextIndex: () => 0,
+  setNextIndex: () => {}
+});
+function useCompositeListContext() {
+  return (0, _solidJs.useContext)(CompositeListContext);
+}

package/cjs/composite/list/useCompositeListItem.d.ts

@@ -0,0 +1,24 @@
+import { type Accessor } from 'solid-js';
+import { type MaybeAccessor } from "../../solid-helpers.js";
+export interface UseCompositeListItemParameters<Metadata> {
+  label?: MaybeAccessor<string | null | undefined>;
+  metadata?: MaybeAccessor<Metadata | undefined | null>;
+  textRef?: MaybeAccessor<HTMLElement | null | undefined>;
+  /** Enables guessing the indexes. This avoids a re-render after mount, which is useful for
+   * large lists. This should be used for lists that are likely flat and vertical, other cases
+   * might trigger a re-render anyway. */
+  indexGuessBehavior?: IndexGuessBehavior;
+}
+interface UseCompositeListItemReturnValue {
+  setRef: (node: HTMLElement | null | undefined) => void;
+  index: Accessor<number>;
+}
+export declare enum IndexGuessBehavior {
+  None = 0,
+  GuessFromOrder = 1,
+}
+/**
+ * Used to register a list item and its index (DOM position) in the `CompositeList`.
+ */
+export declare function useCompositeListItem<Metadata>(params?: UseCompositeListItemParameters<Metadata>): UseCompositeListItemReturnValue;
+export {};

package/cjs/composite/list/useCompositeListItem.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndexGuessBehavior = void 0;
+exports.useCompositeListItem = useCompositeListItem;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _CompositeListContext = require("./CompositeListContext");
+let IndexGuessBehavior = exports.IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
+  IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
+  IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
+  return IndexGuessBehavior;
+}({});
+function initialIndex(indexRef, nextIndex, setNextIndex) {
+  if (indexRef === -1) {
+    const newIndex = nextIndex;
+    setNextIndex(nextIndex + 1);
+    indexRef = newIndex;
+  }
+  return indexRef;
+}
+
+/**
+ * Used to register a list item and its index (DOM position) in the `CompositeList`.
+ */
+function useCompositeListItem(params = {}) {
+  const context = (0, _CompositeListContext.useCompositeListContext)();
+  const indexRef = -1;
+  const [index, setIndex] = (0, _solidJs.createSignal)(params.indexGuessBehavior === IndexGuessBehavior.GuessFromOrder ? initialIndex(indexRef, context.nextIndex(), context.setNextIndex) : -1);
+  const [componentRef, setComponentRef] = (0, _solidJs.createSignal)();
+  function onMapChange(map) {
+    const itemRef = componentRef();
+    const i = itemRef ? map.get(itemRef)?.index : null;
+    if (i != null) {
+      setIndex(i);
+      if (i !== -1 && itemRef) {
+        context.refs.elements[i] = itemRef;
+        if (context.refs.labels) {
+          const textRef = (0, _solidHelpers.access)(params.textRef);
+          const label = (0, _solidHelpers.access)(params.label);
+          const isLabelDefined = label !== undefined;
+          context.refs.labels[i] = isLabelDefined ? label : textRef?.textContent ?? itemRef.textContent;
+        }
+      }
+    }
+  }
+  (0, _solidJs.createEffect)(() => {
+    const node = componentRef();
+    if (node) {
+      context.register(node, params.metadata);
+      context.subscribeMapChange(onMapChange);
+    }
+    (0, _solidJs.onCleanup)(() => {
+      if (node) {
+        context.unregister(node);
+        context.unsubscribeMapChange(onMapChange);
+      }
+    });
+  });
+  return {
+    index,
+    setRef: setComponentRef
+  };
+}

package/cjs/composite/root/CompositeRoot.d.ts

@@ -0,0 +1,32 @@
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { Dimensions, ModifierKey } from "../composite.js";
+import { type CompositeMetadata } from "../list/CompositeList.js";
+/**
+ * @internal
+ */
+export declare function CompositeRoot<Metadata extends {}>(componentProps: CompositeRoot.Props<Metadata>): import("solid-js").JSX.Element;
+export declare namespace CompositeRoot {
+  interface State {}
+  interface Props<Metadata> extends BaseUIComponentProps<'div', State> {
+    orientation?: MaybeAccessor<'horizontal' | 'vertical' | 'both' | undefined>;
+    cols?: MaybeAccessor<number | undefined>;
+    loop?: MaybeAccessor<boolean | undefined>;
+    highlightedIndex?: MaybeAccessor<number | undefined>;
+    onHighlightedIndexChange?: (index: number) => void;
+    itemSizes?: MaybeAccessor<Dimensions[] | undefined>;
+    dense?: MaybeAccessor<boolean | undefined>;
+    enableHomeAndEndKeys?: MaybeAccessor<boolean | undefined>;
+    onMapChange?: (newMap: Array<{
+      element: Element;
+      metadata: CompositeMetadata<Metadata> | null;
+    }>) => void;
+    stopEventPropagation?: MaybeAccessor<boolean | undefined>;
+    refs?: {
+      rootRef?: HTMLElement | null | undefined;
+    };
+    disabledIndices?: MaybeAccessor<number[] | undefined>;
+    modifierKeys?: MaybeAccessor<ModifierKey[] | undefined>;
+    highlightItemOnHover?: MaybeAccessor<boolean | undefined>;
+  }
+}

package/cjs/composite/root/CompositeRoot.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompositeRoot = CompositeRoot;
+var _solidJs = require("solid-js");
+var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _solidHelpers = require("../../solid-helpers");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _CompositeList = require("../list/CompositeList");
+var _CompositeRootContext = require("./CompositeRootContext");
+var _useCompositeRoot = require("./useCompositeRoot");
+var _jsxRuntime = require("react/jsx-runtime");
+const COMPOSITE_ROOT_STATE = {};
+
+/**
+ * @internal
+ */
+function CompositeRoot(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['highlightedIndex', 'onHighlightedIndexChange', 'orientation', 'dense', 'itemSizes', 'loop', 'cols', 'enableHomeAndEndKeys', 'onMapChange', 'stopEventPropagation', 'disabledIndices', 'modifierKeys', 'highlightItemOnHover']);
+  const direction = (0, _DirectionContext.useDirection)();
+  const compositeRoot = (0, _useCompositeRoot.useCompositeRoot)(local, direction);
+  function onMapChange(newMap) {
+    (0, _solidJs.batch)(() => {
+      local.onMapChange?.(newMap);
+      compositeRoot.onMapChange(newMap);
+    });
+  }
+  const contextValue = {
+    highlightedIndex: compositeRoot.highlightedIndex,
+    highlightItemOnHover: () => (0, _solidHelpers.access)(local.highlightItemOnHover) ?? false,
+    onHighlightedIndexChange: compositeRoot.onHighlightedIndexChange
+  };
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state: COMPOSITE_ROOT_STATE,
+    ref: compositeRoot.setRootRef,
+    props: [compositeRoot.props, elementProps]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRootContext.CompositeRootContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
+      refs: compositeRoot.refs,
+      onMapChange: onMapChange,
+      children: element()
+    })
+  });
+}

package/cjs/composite/root/CompositeRootContext.d.ts

@@ -0,0 +1,9 @@
+import { type Accessor } from 'solid-js';
+export interface CompositeRootContext {
+  highlightedIndex: Accessor<number>;
+  onHighlightedIndexChange: (index: number, shouldScrollIntoView?: boolean) => void;
+  highlightItemOnHover: Accessor<boolean>;
+}
+export declare const CompositeRootContext: import("solid-js").Context<CompositeRootContext | undefined>;
+export declare function useCompositeRootContext(optional: true): CompositeRootContext | undefined;
+export declare function useCompositeRootContext(optional?: false): CompositeRootContext;

package/cjs/composite/root/CompositeRootContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompositeRootContext = void 0;
+exports.useCompositeRootContext = useCompositeRootContext;
+var _solidJs = require("solid-js");
+const CompositeRootContext = exports.CompositeRootContext = (0, _solidJs.createContext)(undefined);
+function useCompositeRootContext(optional = false) {
+  const context = (0, _solidJs.useContext)(CompositeRootContext);
+  if (context === undefined && !optional) {
+    throw new Error('Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.');
+  }
+  return context;
+}

package/cjs/composite/root/useCompositeRoot.d.ts

@@ -0,0 +1,57 @@
+import { type Accessor } from 'solid-js';
+import type { TextDirection } from "../../direction-provider/DirectionContext.js";
+import { type MaybeAccessor } from "../../solid-helpers.js";
+import type { HTMLProps } from "../../utils/types.js";
+import { type Dimensions, type ModifierKey } from "../composite.js";
+import { type CompositeMetadata } from "../list/CompositeList.js";
+export interface UseCompositeRootParameters {
+  orientation?: MaybeAccessor<'horizontal' | 'vertical' | 'both' | undefined>;
+  cols?: MaybeAccessor<number | undefined>;
+  loop?: MaybeAccessor<boolean | undefined>;
+  highlightedIndex?: MaybeAccessor<number | undefined>;
+  onHighlightedIndexChange?: (index: number) => void;
+  dense?: MaybeAccessor<boolean | undefined>;
+  itemSizes?: MaybeAccessor<Dimensions[] | undefined>;
+  refs?: {
+    rootRef?: HTMLElement | null | undefined;
+  };
+  /**
+   * When `true`, pressing the Home key moves focus to the first item,
+   * and pressing the End key moves focus to the last item.
+   * @default false
+   */
+  enableHomeAndEndKeys?: MaybeAccessor<boolean | undefined>;
+  /**
+   * When `true`, keypress events on Composite's navigation keys
+   * be stopped with event.stopPropagation()
+   * @default false
+   */
+  stopEventPropagation?: MaybeAccessor<boolean | undefined>;
+  /**
+   * Array of item indices to be considered disabled.
+   * Used for composite items that are focusable when disabled.
+   */
+  disabledIndices?: MaybeAccessor<number[] | undefined>;
+  /**
+   * Array of [modifier key values](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#modifier_keys) that should allow normal keyboard actions
+   * when pressed. By default, all modifier keys prevent normal actions.
+   * @default []
+   */
+  modifierKeys?: MaybeAccessor<ModifierKey[] | undefined>;
+}
+export declare function useCompositeRoot<Metadata>(params: UseCompositeRootParameters, direction: Accessor<TextDirection>): {
+  props: HTMLProps;
+  refs: {
+    elements: Array<HTMLElement | null | undefined>;
+    labels?: Array<string | null>;
+  };
+  highlightedIndex: () => number;
+  disabledIndices: () => number[] | undefined;
+  rootRef: Accessor<HTMLElement | null | undefined>;
+  onHighlightedIndexChange: (index: number, shouldScrollIntoView?: boolean) => void;
+  onMapChange: (newMap: Array<{
+    element: Element;
+    metadata: CompositeMetadata<any> | null;
+  }>) => void;
+  setRootRef: (el: HTMLElement | null | undefined) => void;
+};

package/cjs/composite/root/useCompositeRoot.js

@@ -0,0 +1,234 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCompositeRoot = useCompositeRoot;
+var _solidJs = require("solid-js");
+var _utils = require("../../floating-ui-solid/utils");
+var _solidHelpers = require("../../solid-helpers");
+var _isElementDisabled = require("../../utils/isElementDisabled");
+var _owner = require("../../utils/owner");
+var _composite = require("../composite");
+var _constants = require("../constants");
+const EMPTY_ARRAY = [];
+function useCompositeRoot(params, direction) {
+  const cols = () => (0, _solidHelpers.access)(params.cols) ?? 1;
+  const loop = () => (0, _solidHelpers.access)(params.loop) ?? true;
+  const dense = () => (0, _solidHelpers.access)(params.dense) ?? false;
+  const orientation = () => (0, _solidHelpers.access)(params.orientation) ?? 'both';
+  const enableHomeAndEndKeys = () => (0, _solidHelpers.access)(params.enableHomeAndEndKeys) ?? false;
+  const stopEventPropagation = () => (0, _solidHelpers.access)(params.stopEventPropagation) ?? false;
+  const modifierKeys = () => (0, _solidHelpers.access)(params.modifierKeys) ?? EMPTY_ARRAY;
+  const disabledIndices = () => (0, _solidHelpers.access)(params.disabledIndices);
+  const [internalHighlightedIndex, internalSetHighlightedIndex] = (0, _solidJs.createSignal)(0);
+  const isGrid = () => cols() > 1;
+  const [rootRef, setRootRef] = (0, _solidJs.createSignal)(null);
+  const refs = {
+    elements: [],
+    labels: []
+  };
+  let hasSetDefaultIndexRef = false;
+  const highlightedIndex = () => (0, _solidHelpers.access)(params.highlightedIndex) ?? internalHighlightedIndex();
+  function onHighlightedIndexChange(index, shouldScrollIntoView = false) {
+    (params.onHighlightedIndexChange ?? internalSetHighlightedIndex)(index);
+    if (shouldScrollIntoView) {
+      const newActiveItem = refs.elements[index];
+      (0, _composite.scrollIntoViewIfNeeded)(rootRef(), newActiveItem, direction(), orientation());
+    }
+  }
+
+  // Ensure external controlled updates moves focus to the highlighted item
+  // if focus is currently inside the list.
+  // https://github.com/mui/base-ui/issues/2101
+  // TODO: Solid JS impolementation should be revisited. Patching with a signal for now.
+  (0, _solidJs.createEffect)(() => {
+    const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(rootRef()));
+    if (refs.elements.includes(activeEl)) {
+      const focusedItem = refs.elements[highlightedIndex()];
+      if (focusedItem && focusedItem !== activeEl) {
+        focusedItem.focus();
+      }
+    }
+  });
+  function onMapChange(newMap) {
+    if (newMap.length === 0 || hasSetDefaultIndexRef) {
+      return;
+    }
+    hasSetDefaultIndexRef = true;
+    const sortedElements = newMap.map(item => item.element);
+    const activeItem = sortedElements.find(compositeElement => compositeElement?.hasAttribute(_constants.ACTIVE_COMPOSITE_ITEM));
+    // Set the default highlighted index of an arbitrary composite item.
+    const activeIndex = activeItem ? sortedElements.indexOf(activeItem) : -1;
+    if (activeIndex !== -1) {
+      onHighlightedIndexChange(activeIndex);
+    }
+    (0, _composite.scrollIntoViewIfNeeded)(rootRef(), activeItem, direction(), orientation());
+  }
+  const props = {
+    get ['aria-orientation']() {
+      const orientationValue = orientation();
+      return orientationValue === 'both' ? undefined : orientationValue;
+    },
+    // We need to capture the focus event in order to also trigger the focus event on the root element
+    onFocus(event) {
+      if (!rootRef() || !(0, _composite.isNativeInput)(event.target)) {
+        return;
+      }
+      event.target.setSelectionRange(0, event.target.value.length ?? 0);
+    },
+    onKeyDown(event) {
+      const RELEVANT_KEYS = enableHomeAndEndKeys() ? _composite.ALL_KEYS : _composite.ARROW_KEYS;
+      if (!RELEVANT_KEYS.has(event.key)) {
+        return;
+      }
+      if (isModifierKeySet(event, modifierKeys())) {
+        return;
+      }
+      if (!rootRef()) {
+        return;
+      }
+      const isRtl = direction() === 'rtl';
+      const orientationValue = orientation();
+      const horizontalForwardKey = isRtl ? _composite.ARROW_LEFT : _composite.ARROW_RIGHT;
+      const forwardKey = {
+        horizontal: horizontalForwardKey,
+        vertical: _composite.ARROW_DOWN,
+        both: horizontalForwardKey
+      }[orientationValue];
+      const horizontalBackwardKey = isRtl ? _composite.ARROW_RIGHT : _composite.ARROW_LEFT;
+      const backwardKey = {
+        horizontal: horizontalBackwardKey,
+        vertical: _composite.ARROW_UP,
+        both: horizontalBackwardKey
+      }[orientationValue];
+      if ((0, _composite.isNativeInput)(event.target) && !(0, _isElementDisabled.isElementDisabled)(event.target)) {
+        const selectionStart = event.target.selectionStart;
+        const selectionEnd = event.target.selectionEnd;
+        const textContent = event.target.value ?? '';
+        // return to native textbox behavior when
+        // 1 - Shift is held to make a text selection, or if there already is a text selection
+        if (selectionStart == null || event.shiftKey || selectionStart !== selectionEnd) {
+          return;
+        }
+        // 2 - arrow-ing forward and not in the last position of the text
+        if (event.key !== backwardKey && selectionStart < textContent.length) {
+          return;
+        }
+        // 3 -arrow-ing backward and not in the first position of the text
+        if (event.key !== forwardKey && selectionStart > 0) {
+          return;
+        }
+      }
+      let nextIndex = highlightedIndex();
+      const minIndex = (0, _composite.getMinListIndex)(refs.elements, disabledIndices());
+      const maxIndex = (0, _composite.getMaxListIndex)(refs.elements, disabledIndices());
+      if (isGrid()) {
+        const sizes = (0, _solidHelpers.access)(params.itemSizes) || Array.from({
+          length: refs.elements.length
+        }, () => ({
+          width: 1,
+          height: 1
+        }));
+        // To calculate movements on the grid, we use hypothetical cell indices
+        // as if every item was 1x1, then convert back to real indices.
+        const cellMap = (0, _composite.createGridCellMap)(sizes, cols(), dense());
+        const minGridIndex = cellMap.findIndex(index => index != null && !(0, _composite.isListIndexDisabled)(refs.elements, index, disabledIndices()));
+        // last enabled index
+        const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _composite.isListIndexDisabled)(refs.elements, index, disabledIndices()) ? cellIndex : foundIndex, -1);
+        nextIndex = cellMap[(0, _composite.getGridNavigatedIndex)(cellMap.map(itemIndex => itemIndex != null ? refs.elements[itemIndex] : null), {
+          event,
+          orientation: orientationValue,
+          loop: loop(),
+          cols: cols(),
+          // treat undefined (empty grid spaces) as disabled indices so we
+          // don't end up in them
+          disabledIndices: (0, _composite.getGridCellIndices)([...(disabledIndices() || refs.elements.map((_, index) => (0, _composite.isListIndexDisabled)(refs.elements, index) ? index : undefined)), undefined], cellMap),
+          minIndex: minGridIndex,
+          maxIndex: maxGridIndex,
+          prevIndex: (0, _composite.getGridCellIndexOfCorner)(highlightedIndex() > maxIndex ? minIndex : highlightedIndex(), sizes, cellMap, cols(),
+          // use a corner matching the edge closest to the direction we're
+          // moving in so we don't end up in the same item. Prefer
+          // top/left over bottom/right.
+          event.key === _composite.ARROW_DOWN ? 'bl' : event.key === _composite.ARROW_RIGHT ? 'tr' : 'tl'),
+          rtl: isRtl
+        })]; // navigated cell will never be nullish
+      }
+      const forwardKeys = {
+        horizontal: [horizontalForwardKey],
+        vertical: [_composite.ARROW_DOWN],
+        both: [horizontalForwardKey, _composite.ARROW_DOWN]
+      }[orientationValue];
+      const backwardKeys = {
+        horizontal: [horizontalBackwardKey],
+        vertical: [_composite.ARROW_UP],
+        both: [horizontalBackwardKey, _composite.ARROW_UP]
+      }[orientationValue];
+      const preventedKeys = isGrid() ? RELEVANT_KEYS : {
+        horizontal: enableHomeAndEndKeys() ? _composite.HORIZONTAL_KEYS_WITH_EXTRA_KEYS : _composite.HORIZONTAL_KEYS,
+        vertical: enableHomeAndEndKeys() ? _composite.VERTICAL_KEYS_WITH_EXTRA_KEYS : _composite.VERTICAL_KEYS,
+        both: RELEVANT_KEYS
+      }[orientationValue];
+      if (enableHomeAndEndKeys()) {
+        if (event.key === _composite.HOME) {
+          nextIndex = minIndex;
+        } else if (event.key === _composite.END) {
+          nextIndex = maxIndex;
+        }
+      }
+      if (nextIndex === highlightedIndex() && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))) {
+        if (loop() && nextIndex === maxIndex && forwardKeys.includes(event.key)) {
+          nextIndex = minIndex;
+        } else if (loop() && nextIndex === minIndex && backwardKeys.includes(event.key)) {
+          nextIndex = maxIndex;
+        } else {
+          nextIndex = (0, _composite.findNonDisabledListIndex)(refs.elements, {
+            startingIndex: nextIndex,
+            decrement: backwardKeys.includes(event.key),
+            disabledIndices: disabledIndices()
+          });
+        }
+      }
+      if (nextIndex !== highlightedIndex() && !(0, _composite.isIndexOutOfListBounds)(refs.elements, nextIndex)) {
+        if (stopEventPropagation()) {
+          event.stopPropagation();
+        }
+        if (preventedKeys.has(event.key)) {
+          event.preventDefault();
+        }
+        onHighlightedIndexChange(nextIndex, true);
+
+        // Wait for FocusManager `returnFocus` to execute.
+        queueMicrotask(() => {
+          refs.elements[nextIndex]?.focus();
+        });
+      }
+    }
+  };
+  return {
+    props,
+    refs,
+    highlightedIndex,
+    disabledIndices,
+    rootRef,
+    onHighlightedIndexChange,
+    onMapChange,
+    setRootRef: el => {
+      setRootRef(el);
+      if (params.refs) {
+        params.refs.rootRef = el;
+      }
+    }
+  };
+}
+function isModifierKeySet(event, ignoredModifierKeys) {
+  for (const key of _composite.MODIFIER_KEYS.values()) {
+    if (ignoredModifierKeys.includes(key)) {
+      continue;
+    }
+    if (event.getModifierState(key)) {
+      return true;
+    }
+  }
+  return false;
+}

package/cjs/context-menu/index.d.ts

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

package/cjs/context-menu/index.js

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

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

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