@base-ui/react 1.6.0 → 1.7.0

package/form/Form.js

@@ -36,16 +36,37 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
   const formRef = React.useRef({
     fields: new Map()
   });
+  const elementRef = React.useRef(null);
   const submittedRef = React.useRef(false);
   const submitAttemptedRef = React.useRef(false);
-  const focusControl = (0, _useStableCallback.useStableCallback)(control => {
-    if (!control) {
-      return;
+  const focusFirstInvalid = (0, _useStableCallback.useStableCallback)(() => {
+    // A field can be invalid without a focusable control (for example a checkbox group whose
+    // custom validation failed while every checkbox is unmounted, disabled, or reassociated).
+    // Keep submission blocked, but move focus to the first invalid field that has a usable control.
+    // Registration order can diverge from DOM order (keyed fields reordered without
+    // remounting, portals), so pick the first control by document position. For controls
+    // in disconnected trees (e.g. separate shadow roots), where document position is
+    // implementation-specific, keep registration order.
+    let hasInvalid = false;
+    let firstControl = null;
+    for (const field of formRef.current.fields.values()) {
+      if (field.validityData.state.valid !== false) {
+        continue;
+      }
+      hasInvalid = true;
+      const control = field.controlRef.current;
+      if (control && (!firstControl || comesBeforeInSameTree(control, firstControl))) {
+        firstControl = control;
+      }
     }
-    control.focus();
-    if (control.tagName === 'INPUT') {
-      control.select();
+    if (firstControl) {
+      firstControl.focus();
+      if (firstControl.tagName === 'INPUT') {
+        firstControl.select();
+      }
+      return true;
     }
+    return hasInvalid;
   });
   const [errors, setErrors] = React.useState(externalErrors);
   (0, _useValueChanged.useValueChanged)(externalErrors, () => {
@@ -56,63 +77,51 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
       return;
     }
     submittedRef.current = false;
-    const invalidFields = Array.from(formRef.current.fields.values()).filter(field => field.validityData.state.valid === false);
-    if (invalidFields.length) {
-      focusControl(invalidFields[0].controlRef.current);
-    }
-  }, [errors, focusControl]);
-  const handleImperativeValidate = React.useCallback(fieldName => {
-    const values = Array.from(formRef.current.fields.values());
-    if (fieldName) {
-      const namedField = values.find(field => field.name === fieldName);
-      if (namedField) {
-        namedField.validate();
+    focusFirstInvalid();
+  }, [errors, focusFirstInvalid]);
+  React.useImperativeHandle(actionsRef, () => ({
+    validate(fieldName) {
+      if (fieldName) {
+        Array.from(formRef.current.fields.values()).find(field => field.name === fieldName)?.validate();
+      } else {
+        formRef.current.fields.forEach(field => {
+          field.validate();
+        });
       }
-    } else {
-      values.forEach(field => {
-        field.validate();
-      });
     }
-  }, []);
-  React.useImperativeHandle(actionsRef, () => ({
-    validate: handleImperativeValidate
-  }), [handleImperativeValidate]);
+  }), []);
   const element = (0, _useRenderElement.useRenderElement)('form', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, elementRef],
     props: [{
       noValidate: true,
       onSubmit(event) {
         submitAttemptedRef.current = true;
-        let values = Array.from(formRef.current.fields.values());
 
         // Async validation isn't supported to stop the submit event.
-        values.forEach(field => {
+        formRef.current.fields.forEach(field => {
           field.validate();
         });
-        values = Array.from(formRef.current.fields.values());
-        const invalidField = values.find(field => field.validityData.state.valid === false);
-        if (invalidField) {
+        if (focusFirstInvalid()) {
+          event.preventDefault();
+          return;
+        }
+        submittedRef.current = true;
+        onSubmit?.(event);
+        if (onFormSubmit) {
           event.preventDefault();
-          focusControl(invalidField.controlRef.current);
-        } else {
-          submittedRef.current = true;
-          onSubmit?.(event);
-          if (onFormSubmit) {
-            event.preventDefault();
-            const formValues = values.reduce((acc, field) => {
-              if (field.name) {
-                acc[field.name] = field.getValue();
-              }
-              return acc;
-            }, {});
-            onFormSubmit(formValues, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.none, event.nativeEvent));
-          }
+          const formValues = {};
+          formRef.current.fields.forEach(field => {
+            if (field.name) {
+              formValues[field.name] = field.getValue();
+            }
+          });
+          onFormSubmit(formValues, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.none, event.nativeEvent));
         }
       }
     }, elementProps]
   });
   const clearErrors = (0, _useStableCallback.useStableCallback)(name => {
-    if (name && errors && _empty.EMPTY_OBJECT.hasOwnProperty.call(errors, name)) {
+    if (name && errors && Object.hasOwn(errors, name)) {
       const nextErrors = {
         ...errors
       };
@@ -121,6 +130,7 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     }
   });
   const contextValue = React.useMemo(() => ({
+    elementRef,
     formRef,
     validationMode,
     errors: errors ?? _empty.EMPTY_OBJECT,
@@ -132,4 +142,9 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") Form.displayName = "Form";
+if (process.env.NODE_ENV !== "production") Form.displayName = "Form";
+/* eslint-disable no-bitwise */
+function comesBeforeInSameTree(element, reference) {
+  const position = element.compareDocumentPosition(reference);
+  return (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+}

package/form/Form.mjs

@@ -31,16 +31,37 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
   const formRef = React.useRef({
     fields: new Map()
   });
+  const elementRef = React.useRef(null);
   const submittedRef = React.useRef(false);
   const submitAttemptedRef = React.useRef(false);
-  const focusControl = useStableCallback(control => {
-    if (!control) {
-      return;
+  const focusFirstInvalid = useStableCallback(() => {
+    // A field can be invalid without a focusable control (for example a checkbox group whose
+    // custom validation failed while every checkbox is unmounted, disabled, or reassociated).
+    // Keep submission blocked, but move focus to the first invalid field that has a usable control.
+    // Registration order can diverge from DOM order (keyed fields reordered without
+    // remounting, portals), so pick the first control by document position. For controls
+    // in disconnected trees (e.g. separate shadow roots), where document position is
+    // implementation-specific, keep registration order.
+    let hasInvalid = false;
+    let firstControl = null;
+    for (const field of formRef.current.fields.values()) {
+      if (field.validityData.state.valid !== false) {
+        continue;
+      }
+      hasInvalid = true;
+      const control = field.controlRef.current;
+      if (control && (!firstControl || comesBeforeInSameTree(control, firstControl))) {
+        firstControl = control;
+      }
     }
-    control.focus();
-    if (control.tagName === 'INPUT') {
-      control.select();
+    if (firstControl) {
+      firstControl.focus();
+      if (firstControl.tagName === 'INPUT') {
+        firstControl.select();
+      }
+      return true;
     }
+    return hasInvalid;
   });
   const [errors, setErrors] = React.useState(externalErrors);
   useValueChanged(externalErrors, () => {
@@ -51,63 +72,51 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
       return;
     }
     submittedRef.current = false;
-    const invalidFields = Array.from(formRef.current.fields.values()).filter(field => field.validityData.state.valid === false);
-    if (invalidFields.length) {
-      focusControl(invalidFields[0].controlRef.current);
-    }
-  }, [errors, focusControl]);
-  const handleImperativeValidate = React.useCallback(fieldName => {
-    const values = Array.from(formRef.current.fields.values());
-    if (fieldName) {
-      const namedField = values.find(field => field.name === fieldName);
-      if (namedField) {
-        namedField.validate();
+    focusFirstInvalid();
+  }, [errors, focusFirstInvalid]);
+  React.useImperativeHandle(actionsRef, () => ({
+    validate(fieldName) {
+      if (fieldName) {
+        Array.from(formRef.current.fields.values()).find(field => field.name === fieldName)?.validate();
+      } else {
+        formRef.current.fields.forEach(field => {
+          field.validate();
+        });
       }
-    } else {
-      values.forEach(field => {
-        field.validate();
-      });
     }
-  }, []);
-  React.useImperativeHandle(actionsRef, () => ({
-    validate: handleImperativeValidate
-  }), [handleImperativeValidate]);
+  }), []);
   const element = useRenderElement('form', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, elementRef],
     props: [{
       noValidate: true,
       onSubmit(event) {
         submitAttemptedRef.current = true;
-        let values = Array.from(formRef.current.fields.values());
 
         // Async validation isn't supported to stop the submit event.
-        values.forEach(field => {
+        formRef.current.fields.forEach(field => {
           field.validate();
         });
-        values = Array.from(formRef.current.fields.values());
-        const invalidField = values.find(field => field.validityData.state.valid === false);
-        if (invalidField) {
+        if (focusFirstInvalid()) {
+          event.preventDefault();
+          return;
+        }
+        submittedRef.current = true;
+        onSubmit?.(event);
+        if (onFormSubmit) {
           event.preventDefault();
-          focusControl(invalidField.controlRef.current);
-        } else {
-          submittedRef.current = true;
-          onSubmit?.(event);
-          if (onFormSubmit) {
-            event.preventDefault();
-            const formValues = values.reduce((acc, field) => {
-              if (field.name) {
-                acc[field.name] = field.getValue();
-              }
-              return acc;
-            }, {});
-            onFormSubmit(formValues, createGenericEventDetails(REASONS.none, event.nativeEvent));
-          }
+          const formValues = {};
+          formRef.current.fields.forEach(field => {
+            if (field.name) {
+              formValues[field.name] = field.getValue();
+            }
+          });
+          onFormSubmit(formValues, createGenericEventDetails(REASONS.none, event.nativeEvent));
         }
       }
     }, elementProps]
   });
   const clearErrors = useStableCallback(name => {
-    if (name && errors && EMPTY_OBJECT.hasOwnProperty.call(errors, name)) {
+    if (name && errors && Object.hasOwn(errors, name)) {
       const nextErrors = {
         ...errors
       };
@@ -116,6 +125,7 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
     }
   });
   const contextValue = React.useMemo(() => ({
+    elementRef,
     formRef,
     validationMode,
     errors: errors ?? EMPTY_OBJECT,
@@ -127,4 +137,9 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
     children: element
   });
 });
-if (process.env.NODE_ENV !== "production") Form.displayName = "Form";
+if (process.env.NODE_ENV !== "production") Form.displayName = "Form";
+/* eslint-disable no-bitwise */
+function comesBeforeInSameTree(element, reference) {
+  const position = element.compareDocumentPosition(reference);
+  return (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.6.0
+ * @base-ui/react v1.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.6.0
+ * @base-ui/react v1.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/PrehydrationScript.d.mts

@@ -0,0 +1,36 @@
+/**
+ * Renders an inline script that runs before React hydrates, used by components that need
+ * to position server-rendered content ahead of hydration (e.g. `Tabs.Indicator`,
+ * `Slider.Thumb`).
+ *
+ * The `script` source is imported by the caller through the package's `#prehydration/*`
+ * subpath import, whose `browser` condition resolves to a stub module exporting an empty
+ * string — so the script body is excluded from client bundles. It only ever executes from
+ * server-rendered HTML.
+ *
+ * Render this only when the script should be emitted (i.e. gate `renderBeforeHydration`
+ * and any structural conditions at the call site). The element is still rendered (with
+ * empty content) on the client during the hydration pass so the React tree matches the
+ * server markup; `suppressHydrationWarning` bridges the content difference and React keeps
+ * the already-executed server script. Once `isHydrating` flips to `false` the element
+ * unmounts.
+ *
+ * The component must stay in client bundles: returning `null` on the client (e.g. by
+ * stubbing the whole component) would drop an element the server emitted and trigger a
+ * recoverable hydration error (React #418) in consumers' apps. Only the script body is
+ * excluded from client bundles, via the `#prehydration/*` `browser` condition.
+ *
+ * When adding a new consumer, register a matching `#prehydration/*` entry (with `browser`
+ * and `default` conditions) in `packages/react/package.json` `imports`; the `browser`
+ * condition reuses the shared `internals/prehydrationScript.stub.ts`.
+ */
+export declare function PrehydrationScript(props: PrehydrationScript.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace PrehydrationScript {
+  interface Props {
+    /**
+     * The script source, imported through the `#prehydration/*` subpath import.
+     * Empty in client bundles.
+     */
+    script: string;
+  }
+}

package/internals/PrehydrationScript.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Renders an inline script that runs before React hydrates, used by components that need
+ * to position server-rendered content ahead of hydration (e.g. `Tabs.Indicator`,
+ * `Slider.Thumb`).
+ *
+ * The `script` source is imported by the caller through the package's `#prehydration/*`
+ * subpath import, whose `browser` condition resolves to a stub module exporting an empty
+ * string — so the script body is excluded from client bundles. It only ever executes from
+ * server-rendered HTML.
+ *
+ * Render this only when the script should be emitted (i.e. gate `renderBeforeHydration`
+ * and any structural conditions at the call site). The element is still rendered (with
+ * empty content) on the client during the hydration pass so the React tree matches the
+ * server markup; `suppressHydrationWarning` bridges the content difference and React keeps
+ * the already-executed server script. Once `isHydrating` flips to `false` the element
+ * unmounts.
+ *
+ * The component must stay in client bundles: returning `null` on the client (e.g. by
+ * stubbing the whole component) would drop an element the server emitted and trigger a
+ * recoverable hydration error (React #418) in consumers' apps. Only the script body is
+ * excluded from client bundles, via the `#prehydration/*` `browser` condition.
+ *
+ * When adding a new consumer, register a matching `#prehydration/*` entry (with `browser`
+ * and `default` conditions) in `packages/react/package.json` `imports`; the `browser`
+ * condition reuses the shared `internals/prehydrationScript.stub.ts`.
+ */
+export declare function PrehydrationScript(props: PrehydrationScript.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace PrehydrationScript {
+  interface Props {
+    /**
+     * The script source, imported through the `#prehydration/*` subpath import.
+     * Empty in client bundles.
+     */
+    script: string;
+  }
+}

package/internals/PrehydrationScript.js

@@ -0,0 +1,59 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PrehydrationScript = PrehydrationScript;
+var React = _interopRequireWildcard(require("react"));
+var _useIsHydrating = require("../utils/useIsHydrating");
+var _CSPContext = require("./csp-context/CSPContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Renders an inline script that runs before React hydrates, used by components that need
+ * to position server-rendered content ahead of hydration (e.g. `Tabs.Indicator`,
+ * `Slider.Thumb`).
+ *
+ * The `script` source is imported by the caller through the package's `#prehydration/*`
+ * subpath import, whose `browser` condition resolves to a stub module exporting an empty
+ * string — so the script body is excluded from client bundles. It only ever executes from
+ * server-rendered HTML.
+ *
+ * Render this only when the script should be emitted (i.e. gate `renderBeforeHydration`
+ * and any structural conditions at the call site). The element is still rendered (with
+ * empty content) on the client during the hydration pass so the React tree matches the
+ * server markup; `suppressHydrationWarning` bridges the content difference and React keeps
+ * the already-executed server script. Once `isHydrating` flips to `false` the element
+ * unmounts.
+ *
+ * The component must stay in client bundles: returning `null` on the client (e.g. by
+ * stubbing the whole component) would drop an element the server emitted and trigger a
+ * recoverable hydration error (React #418) in consumers' apps. Only the script body is
+ * excluded from client bundles, via the `#prehydration/*` `browser` condition.
+ *
+ * When adding a new consumer, register a matching `#prehydration/*` entry (with `browser`
+ * and `default` conditions) in `packages/react/package.json` `imports`; the `browser`
+ * condition reuses the shared `internals/prehydrationScript.stub.ts`.
+ */
+function PrehydrationScript(props) {
+  const {
+    script
+  } = props;
+  const {
+    nonce
+  } = (0, _CSPContext.useCSPContext)();
+  const isHydrating = (0, _useIsHydrating.useIsHydrating)();
+  if (!isHydrating) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+    nonce: nonce
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: script
+    },
+    suppressHydrationWarning: true
+  });
+}

package/internals/PrehydrationScript.mjs

@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import { useIsHydrating } from "../utils/useIsHydrating.mjs";
+import { useCSPContext } from "./csp-context/CSPContext.mjs";
+
+/**
+ * Renders an inline script that runs before React hydrates, used by components that need
+ * to position server-rendered content ahead of hydration (e.g. `Tabs.Indicator`,
+ * `Slider.Thumb`).
+ *
+ * The `script` source is imported by the caller through the package's `#prehydration/*`
+ * subpath import, whose `browser` condition resolves to a stub module exporting an empty
+ * string — so the script body is excluded from client bundles. It only ever executes from
+ * server-rendered HTML.
+ *
+ * Render this only when the script should be emitted (i.e. gate `renderBeforeHydration`
+ * and any structural conditions at the call site). The element is still rendered (with
+ * empty content) on the client during the hydration pass so the React tree matches the
+ * server markup; `suppressHydrationWarning` bridges the content difference and React keeps
+ * the already-executed server script. Once `isHydrating` flips to `false` the element
+ * unmounts.
+ *
+ * The component must stay in client bundles: returning `null` on the client (e.g. by
+ * stubbing the whole component) would drop an element the server emitted and trigger a
+ * recoverable hydration error (React #418) in consumers' apps. Only the script body is
+ * excluded from client bundles, via the `#prehydration/*` `browser` condition.
+ *
+ * When adding a new consumer, register a matching `#prehydration/*` entry (with `browser`
+ * and `default` conditions) in `packages/react/package.json` `imports`; the `browser`
+ * condition reuses the shared `internals/prehydrationScript.stub.ts`.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PrehydrationScript(props) {
+  const {
+    script
+  } = props;
+  const {
+    nonce
+  } = useCSPContext();
+  const isHydrating = useIsHydrating();
+  if (!isHydrating) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("script", {
+    nonce: nonce
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: script
+    },
+    suppressHydrationWarning: true
+  });
+}

package/internals/composite/composite.d.mts

@@ -8,17 +8,9 @@ export declare const HOME = "Home";
 export declare const END = "End";
 export declare const PAGE_UP = "PageUp";
 export declare const PAGE_DOWN = "PageDown";
-export declare const HORIZONTAL_KEYS: Set<string>;
-export declare const HORIZONTAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
-export declare const VERTICAL_KEYS: Set<string>;
-export declare const VERTICAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
-export declare const ARROW_KEYS: Set<string>;
 export declare const COMPOSITE_KEYS: Set<string>;
 export declare const SHIFT: 'Shift';
-export declare const CONTROL: 'Control';
-export declare const ALT: 'Alt';
-export declare const META: 'Meta';
-export declare const MODIFIER_KEYS: Set<"Alt" | "Control" | "Meta" | "Shift">;
-export type ModifierKey = typeof MODIFIER_KEYS extends Set<infer Keys> ? Keys : never;
+export declare const MODIFIER_KEYS: readonly ["Shift", 'Control', 'Alt', 'Meta'];
+export type ModifierKey = (typeof MODIFIER_KEYS)[number];
 export declare function isNativeInput(element: EventTarget): element is HTMLElement & (HTMLInputElement | HTMLTextAreaElement);
 export declare function scrollIntoViewIfNeeded(scrollContainer: HTMLElement | null, element: HTMLElement | null, direction: TextDirection, orientation: 'horizontal' | 'vertical' | 'both'): void;

package/internals/composite/composite.d.ts

@@ -8,17 +8,9 @@ export declare const HOME = "Home";
 export declare const END = "End";
 export declare const PAGE_UP = "PageUp";
 export declare const PAGE_DOWN = "PageDown";
-export declare const HORIZONTAL_KEYS: Set<string>;
-export declare const HORIZONTAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
-export declare const VERTICAL_KEYS: Set<string>;
-export declare const VERTICAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
-export declare const ARROW_KEYS: Set<string>;
 export declare const COMPOSITE_KEYS: Set<string>;
 export declare const SHIFT: 'Shift';
-export declare const CONTROL: 'Control';
-export declare const ALT: 'Alt';
-export declare const META: 'Meta';
-export declare const MODIFIER_KEYS: Set<"Alt" | "Control" | "Meta" | "Shift">;
-export type ModifierKey = typeof MODIFIER_KEYS extends Set<infer Keys> ? Keys : never;
+export declare const MODIFIER_KEYS: readonly ["Shift", 'Control', 'Alt', 'Meta'];
+export type ModifierKey = (typeof MODIFIER_KEYS)[number];
 export declare function isNativeInput(element: EventTarget): element is HTMLElement & (HTMLInputElement | HTMLTextAreaElement);
 export declare function scrollIntoViewIfNeeded(scrollContainer: HTMLElement | null, element: HTMLElement | null, direction: TextDirection, orientation: 'horizontal' | 'vertical' | 'both'): void;

package/internals/composite/composite.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS = exports.SHIFT = exports.PAGE_UP = exports.PAGE_DOWN = exports.MODIFIER_KEYS = exports.META = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS = exports.HOME = exports.END = exports.CONTROL = exports.COMPOSITE_KEYS = exports.ARROW_UP = exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_KEYS = exports.ARROW_DOWN = exports.ALT = void 0;
+exports.SHIFT = exports.PAGE_UP = exports.PAGE_DOWN = exports.MODIFIER_KEYS = exports.HOME = exports.END = exports.COMPOSITE_KEYS = exports.ARROW_UP = exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_DOWN = void 0;
 Object.defineProperty(exports, "findNonDisabledListIndex", {
   enumerable: true,
   get: function () {
@@ -52,17 +52,9 @@ const HOME = exports.HOME = 'Home';
 const END = exports.END = 'End';
 const PAGE_UP = exports.PAGE_UP = 'PageUp';
 const PAGE_DOWN = exports.PAGE_DOWN = 'PageDown';
-const HORIZONTAL_KEYS = exports.HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
-const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT, HOME, END]);
-const VERTICAL_KEYS = exports.VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
-const VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_UP, ARROW_DOWN, HOME, END]);
-const ARROW_KEYS = exports.ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
-const COMPOSITE_KEYS = exports.COMPOSITE_KEYS = new Set([...ARROW_KEYS, HOME, END]);
+const COMPOSITE_KEYS = exports.COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
 const SHIFT = exports.SHIFT = 'Shift';
-const CONTROL = exports.CONTROL = 'Control';
-const ALT = exports.ALT = 'Alt';
-const META = exports.META = 'Meta';
-const MODIFIER_KEYS = exports.MODIFIER_KEYS = new Set([SHIFT, CONTROL, ALT, META]);
+const MODIFIER_KEYS = exports.MODIFIER_KEYS = [SHIFT, 'Control', 'Alt', 'Meta'];
 function isInputElement(element) {
   return (0, _dom.isHTMLElement)(element) && element.tagName === 'INPUT';
 }
@@ -97,7 +89,7 @@ function scrollIntoViewIfNeeded(scrollContainer, element, direction, orientation
       }
     }
     if (direction === 'rtl') {
-      if (elementOffsetLeft - elementStyles.scrollMarginRight < scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft) {
+      if (elementOffsetLeft - elementStyles.scrollMarginLeft < scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft) {
         // overflow to the left, scroll to align left edges
         targetX = elementOffsetLeft - elementStyles.scrollMarginLeft - containerStyles.scrollPaddingLeft;
       } else if (elementOffsetLeft + element.offsetWidth + elementStyles.scrollMarginRight > scrollContainer.scrollLeft + scrollContainer.clientWidth - containerStyles.scrollPaddingRight) {

package/internals/composite/composite.mjs

@@ -8,17 +8,9 @@ export const HOME = 'Home';
 export const END = 'End';
 export const PAGE_UP = 'PageUp';
 export const PAGE_DOWN = 'PageDown';
-export const HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
-export const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT, HOME, END]);
-export const VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
-export const VERTICAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_UP, ARROW_DOWN, HOME, END]);
-export const ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
-export const COMPOSITE_KEYS = new Set([...ARROW_KEYS, HOME, END]);
+export const COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
 export const SHIFT = 'Shift';
-export const CONTROL = 'Control';
-export const ALT = 'Alt';
-export const META = 'Meta';
-export const MODIFIER_KEYS = new Set([SHIFT, CONTROL, ALT, META]);
+export const MODIFIER_KEYS = [SHIFT, 'Control', 'Alt', 'Meta'];
 function isInputElement(element) {
   return isHTMLElement(element) && element.tagName === 'INPUT';
 }
@@ -53,7 +45,7 @@ export function scrollIntoViewIfNeeded(scrollContainer, element, direction, orie
       }
     }
     if (direction === 'rtl') {
-      if (elementOffsetLeft - elementStyles.scrollMarginRight < scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft) {
+      if (elementOffsetLeft - elementStyles.scrollMarginLeft < scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft) {
         // overflow to the left, scroll to align left edges
         targetX = elementOffsetLeft - elementStyles.scrollMarginLeft - containerStyles.scrollPaddingLeft;
       } else if (elementOffsetLeft + element.offsetWidth + elementStyles.scrollMarginRight > scrollContainer.scrollLeft + scrollContainer.clientWidth - containerStyles.scrollPaddingRight) {

package/internals/composite/index.d.mts

@@ -1,10 +1,11 @@
 export { CompositeItem } from "./item/CompositeItem.mjs";
 export { CompositeList } from "./list/CompositeList.mjs";
 export type { CompositeMetadata } from "./list/CompositeList.mjs";
+export { CompositeListContext, useCompositeListContext } from "./list/CompositeListContext.mjs";
+export type { CompositeListContextValue } from "./list/CompositeListContext.mjs";
 export { CompositeRoot } from "./root/CompositeRoot.mjs";
 export { useCompositeListItem } from "./list/useCompositeListItem.mjs";
 export type { UseCompositeListItemParameters } from "./list/useCompositeListItem.mjs";
-export { IndexGuessBehavior } from "./list/useCompositeListItem.mjs";
 export { useCompositeRoot } from "./root/useCompositeRoot.mjs";
 export type { UseCompositeRootParameters } from "./root/useCompositeRoot.mjs";
 export { gridNavigation } from "./root/gridNavigation.mjs";

package/internals/composite/index.d.ts

@@ -1,10 +1,11 @@
 export { CompositeItem } from "./item/CompositeItem.js";
 export { CompositeList } from "./list/CompositeList.js";
 export type { CompositeMetadata } from "./list/CompositeList.js";
+export { CompositeListContext, useCompositeListContext } from "./list/CompositeListContext.js";
+export type { CompositeListContextValue } from "./list/CompositeListContext.js";
 export { CompositeRoot } from "./root/CompositeRoot.js";
 export { useCompositeListItem } from "./list/useCompositeListItem.js";
 export type { UseCompositeListItemParameters } from "./list/useCompositeListItem.js";
-export { IndexGuessBehavior } from "./list/useCompositeListItem.js";
 export { useCompositeRoot } from "./root/useCompositeRoot.js";
 export type { UseCompositeRootParameters } from "./root/useCompositeRoot.js";
 export { gridNavigation } from "./root/gridNavigation.js";