@base-ui/react 1.3.0 → 1.4.0

package/floating-ui-react/utils/composite.js

@@ -21,22 +21,22 @@ var _constants = require("./constants");
 function isDifferentGridRow(index, cols, prevRow) {
   return Math.floor(index / cols) !== prevRow;
 }
-function isIndexOutOfListBounds(listRef, index) {
-  return index < 0 || index >= listRef.current.length;
+function isIndexOutOfListBounds(list, index) {
+  return index < 0 || index >= list.length;
 }
 function getMinListIndex(listRef, disabledIndices) {
-  return findNonDisabledListIndex(listRef, {
+  return findNonDisabledListIndex(listRef.current, {
     disabledIndices
   });
 }
 function getMaxListIndex(listRef, disabledIndices) {
-  return findNonDisabledListIndex(listRef, {
+  return findNonDisabledListIndex(listRef.current, {
     decrement: true,
     startingIndex: listRef.current.length,
     disabledIndices
   });
 }
-function findNonDisabledListIndex(listRef, {
+function findNonDisabledListIndex(list, {
   startingIndex = -1,
   decrement = false,
   disabledIndices,
@@ -45,13 +45,14 @@ function findNonDisabledListIndex(listRef, {
   let index = startingIndex;
   do {
     index += decrement ? -amount : amount;
-  } while (index >= 0 && index <= listRef.current.length - 1 && isListIndexDisabled(listRef, index, disabledIndices));
+  } while (index >= 0 && index <= list.length - 1 && isListIndexDisabled(list, index, disabledIndices));
   return index;
 }
-function getGridNavigatedIndex(listRef, {
+function getGridNavigatedIndex(list, {
   event,
   orientation,
   loopFocus,
+  onLoop,
   rtl,
   cols,
   disabledIndices,
@@ -79,7 +80,7 @@ function getGridNavigatedIndex(listRef, {
     {
       let currentRowEl = null;
       let currentRowIndex = -1;
-      listRef.current.forEach((el, idx) => {
+      list.forEach((el, idx) => {
         if (el == null) {
           return;
         }
@@ -110,7 +111,7 @@ function getGridNavigatedIndex(listRef, {
         }
       }
     }
-    const hasVirtualizedGaps = hasDomRows && visibleItemCount < listRef.current.length;
+    const hasVirtualizedGaps = hasDomRows && visibleItemCount < list.length;
     const verticalCols = inferredDomCols || cols;
     const navigateVertically = direction => {
       if (!hasDomRows || prevIndex === -1) {
@@ -128,11 +129,17 @@ function getGridNavigatedIndex(listRef, {
             return undefined;
           }
           nextRow = nextRow < 0 ? rows.length - 1 : 0;
+          if (onLoop) {
+            const clampedCol = Math.min(colInRow, rows[nextRow].length - 1);
+            const targetItemIndex = rows[nextRow][clampedCol] ?? rows[nextRow][0];
+            const returnedItemIndex = onLoop(event, prevIndex, targetItemIndex);
+            nextRow = rowIndexMap[returnedItemIndex] ?? nextRow;
+          }
         }
         const targetRow = rows[nextRow];
         for (let col = Math.min(colInRow, targetRow.length - 1); col >= 0; col -= 1) {
           const candidate = targetRow[col];
-          if (!isListIndexDisabled(listRef, candidate, disabledIndices)) {
+          if (!isListIndexDisabled(list, candidate, disabledIndices)) {
             return candidate;
           }
         }
@@ -156,7 +163,7 @@ function getGridNavigatedIndex(listRef, {
         }
         const rowEnd = Math.min(rowStart + verticalCols - 1, maxIndex);
         for (let candidate = Math.min(rowStart + colInRow, rowEnd); candidate >= rowStart; candidate -= 1) {
-          if (!isListIndexDisabled(listRef, candidate, disabledIndices)) {
+          if (!isListIndexDisabled(list, candidate, disabledIndices)) {
             return candidate;
           }
         }
@@ -172,7 +179,7 @@ function getGridNavigatedIndex(listRef, {
     } else if (prevIndex === -1) {
       nextIndex = verticalDirection === 'up' ? maxIndex : minIndex;
     } else {
-      nextIndex = findNonDisabledListIndex(listRef, {
+      nextIndex = findNonDisabledListIndex(list, {
         startingIndex: prevIndex,
         amount: verticalCols,
         decrement: verticalDirection === 'up',
@@ -188,17 +195,23 @@ function getGridNavigatedIndex(listRef, {
           } else {
             nextIndex = maxCol > col ? offset : offset - verticalCols;
           }
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
         if (verticalDirection === 'down' && prevIndex + verticalCols > maxIndex) {
-          nextIndex = findNonDisabledListIndex(listRef, {
+          nextIndex = findNonDisabledListIndex(list, {
             startingIndex: prevIndex % verticalCols - verticalCols,
             amount: verticalCols,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       }
     }
-    if (isIndexOutOfListBounds(listRef, nextIndex)) {
+    if (isIndexOutOfListBounds(list, nextIndex)) {
       nextIndex = prevIndex;
     }
   }
@@ -211,21 +224,27 @@ function getGridNavigatedIndex(listRef, {
         (0, _event.stopEvent)(event);
       }
       if (prevIndex % cols !== cols - 1) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex,
           disabledIndices
         });
         if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) {
-          nextIndex = findNonDisabledListIndex(listRef, {
+          nextIndex = findNonDisabledListIndex(list, {
             startingIndex: prevIndex - prevIndex % cols - 1,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       } else if (loopFocus) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex - prevIndex % cols - 1,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       }
       if (isDifferentGridRow(nextIndex, cols, prevRow)) {
         nextIndex = prevIndex;
@@ -236,36 +255,45 @@ function getGridNavigatedIndex(listRef, {
         (0, _event.stopEvent)(event);
       }
       if (prevIndex % cols !== 0) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex,
           decrement: true,
           disabledIndices
         });
         if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) {
-          nextIndex = findNonDisabledListIndex(listRef, {
+          nextIndex = findNonDisabledListIndex(list, {
             startingIndex: prevIndex + (cols - prevIndex % cols),
             decrement: true,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       } else if (loopFocus) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex + (cols - prevIndex % cols),
           decrement: true,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       }
       if (isDifferentGridRow(nextIndex, cols, prevRow)) {
         nextIndex = prevIndex;
       }
     }
     const lastRow = (0, _utils.floor)(maxIndex / cols) === prevRow;
-    if (isIndexOutOfListBounds(listRef, nextIndex)) {
+    if (isIndexOutOfListBounds(list, nextIndex)) {
       if (loopFocus && lastRow) {
-        nextIndex = event.key === (rtl ? _constants.ARROW_RIGHT : _constants.ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(listRef, {
+        nextIndex = event.key === (rtl ? _constants.ARROW_RIGHT : _constants.ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(list, {
           startingIndex: prevIndex - prevIndex % cols - 1,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       } else {
         nextIndex = prevIndex;
       }
@@ -344,12 +372,12 @@ function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
 function getGridCellIndices(indices, cellMap) {
   return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
 }
-function isListIndexDisabled(listRef, index, disabledIndices) {
+function isListIndexDisabled(list, index, disabledIndices) {
   const isExplicitlyDisabled = typeof disabledIndices === 'function' ? disabledIndices(index) : disabledIndices?.includes(index) ?? false;
   if (isExplicitlyDisabled) {
     return true;
   }
-  const element = listRef.current[index];
+  const element = list[index];
   if (!element) {
     return false;
   }
@@ -359,5 +387,8 @@ function isListIndexDisabled(listRef, index, disabledIndices) {
   return !disabledIndices && (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true');
 }
 function isElementVisible(element) {
+  if (typeof element.checkVisibility === 'function') {
+    return element.checkVisibility();
+  }
   return (0, _dom.getComputedStyle)(element).display !== 'none';
 }

package/floating-ui-react/utils/element.d.ts

@@ -1,11 +1,11 @@
 import { type PopupTriggerMap } from "../../utils/popups/index.js";
-export declare function activeElement(doc: Document): Element | null;
-export declare function contains(parent?: Element | null, child?: Element | null): boolean;
+import { activeElement, contains, getTarget } from "./shadowDom.js";
+export { activeElement, contains, getTarget };
 export declare function isTargetInsideEnabledTrigger(target: EventTarget | null, triggerElements: PopupTriggerMap): boolean;
-export declare function getTarget(event: Event): EventTarget | null;
 export declare function isEventTargetWithin(event: Event, node: Node | null | undefined): boolean;
 export declare function isRootElement(element: Element): boolean;
 export declare function isTypeableElement(element: unknown): boolean;
+export declare function isInteractiveElement(element: Element | null): boolean;
 export declare function isTypeableCombobox(element: Element | null): boolean;
 export declare function matchesFocusVisible(element: Element | null): boolean;
 export declare function getFloatingFocusElement(floatingElement: HTMLElement | null | undefined): HTMLElement | null;

package/floating-ui-react/utils/element.js

@@ -3,11 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.activeElement = activeElement;
-exports.contains = contains;
+Object.defineProperty(exports, "activeElement", {
+  enumerable: true,
+  get: function () {
+    return _shadowDom.activeElement;
+  }
+});
+Object.defineProperty(exports, "contains", {
+  enumerable: true,
+  get: function () {
+    return _shadowDom.contains;
+  }
+});
 exports.getFloatingFocusElement = getFloatingFocusElement;
-exports.getTarget = getTarget;
+Object.defineProperty(exports, "getTarget", {
+  enumerable: true,
+  get: function () {
+    return _shadowDom.getTarget;
+  }
+});
 exports.isEventTargetWithin = isEventTargetWithin;
+exports.isInteractiveElement = isInteractiveElement;
 exports.isRootElement = isRootElement;
 exports.isTargetInsideEnabledTrigger = isTargetInsideEnabledTrigger;
 exports.isTypeableCombobox = isTypeableCombobox;
@@ -16,38 +32,7 @@ exports.matchesFocusVisible = matchesFocusVisible;
 var _dom = require("@floating-ui/utils/dom");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _constants = require("./constants");
-function activeElement(doc) {
-  let element = doc.activeElement;
-  while (element?.shadowRoot?.activeElement != null) {
-    element = element.shadowRoot.activeElement;
-  }
-  return element;
-}
-function contains(parent, child) {
-  if (!parent || !child) {
-    return false;
-  }
-  const rootNode = child.getRootNode?.();
-
-  // First, attempt with faster native method
-  if (parent.contains(child)) {
-    return true;
-  }
-
-  // then fallback to custom implementation with Shadow DOM support
-  if (rootNode && (0, _dom.isShadowRoot)(rootNode)) {
-    let next = child;
-    while (next) {
-      if (parent === next) {
-        return true;
-      }
-      next = next.parentNode || next.host;
-    }
-  }
-
-  // Give up, the result is false
-  return false;
-}
+var _shadowDom = require("./shadowDom");
 function isTargetInsideEnabledTrigger(target, triggerElements) {
   if (!(0, _dom.isElement)(target)) {
     return false;
@@ -57,21 +42,12 @@ function isTargetInsideEnabledTrigger(target, triggerElements) {
     return !targetElement.hasAttribute('data-trigger-disabled');
   }
   for (const [, trigger] of triggerElements.entries()) {
-    if (contains(trigger, targetElement)) {
+    if ((0, _shadowDom.contains)(trigger, targetElement)) {
       return !trigger.hasAttribute('data-trigger-disabled');
     }
   }
   return false;
 }
-function getTarget(event) {
-  if ('composedPath' in event) {
-    return event.composedPath()[0];
-  }
-
-  // TS thinks `event` is of type never as it assumes all browsers support
-  // `composedPath()`, but browsers without shadow DOM don't.
-  return event.target;
-}
 function isEventTargetWithin(event, node) {
   if (node == null) {
     return false;
@@ -90,6 +66,9 @@ function isRootElement(element) {
 function isTypeableElement(element) {
   return (0, _dom.isHTMLElement)(element) && element.matches(_constants.TYPEABLE_SELECTOR);
 }
+function isInteractiveElement(element) {
+  return element?.closest(`button,a[href],[role="button"],select,[tabindex]:not([tabindex="-1"]),${_constants.TYPEABLE_SELECTOR}`) != null;
+}
 function isTypeableCombobox(element) {
   if (!element) {
     return false;

package/floating-ui-react/utils/enqueueFocus.d.ts

@@ -1,8 +1,9 @@
-import type { FocusableElement } from 'tabbable';
+import type { FocusableElement } from "./tabbable.js";
+import { NOOP } from "../../utils/noop.js";
 interface Options {
   preventScroll?: boolean | undefined;
   cancelPrevious?: boolean | undefined;
   sync?: boolean | undefined;
 }
-export declare function enqueueFocus(el: FocusableElement | null, options?: Options): void;
+export declare function enqueueFocus(el: FocusableElement | null, options?: Options): typeof NOOP;
 export {};

package/floating-ui-react/utils/enqueueFocus.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.enqueueFocus = enqueueFocus;
+var _noop = require("../../utils/noop");
 let rafId = 0;
 function enqueueFocus(el, options = {}) {
   const {
@@ -19,7 +20,14 @@ function enqueueFocus(el, options = {}) {
   });
   if (sync) {
     exec();
-  } else {
-    rafId = requestAnimationFrame(exec);
+    return _noop.NOOP;
   }
+  const currentRafId = requestAnimationFrame(exec);
+  rafId = currentRafId;
+  return () => {
+    if (rafId === currentRafId) {
+      cancelAnimationFrame(currentRafId);
+      rafId = 0;
+    }
+  };
 }

package/floating-ui-react/utils/getEmptyRootContext.js

@@ -9,12 +9,13 @@ var _FloatingRootStore = require("../components/FloatingRootStore");
 function getEmptyRootContext() {
   return new _FloatingRootStore.FloatingRootStore({
     open: false,
+    transitionStatus: undefined,
     floatingElement: null,
     referenceElement: null,
     triggerElements: new _popups.PopupTriggerMap(),
     floatingId: '',
+    syncOnly: false,
     nested: false,
-    noEmit: false,
     onOpenChange: undefined
   });
 }

package/floating-ui-react/utils/nodes.js

@@ -9,8 +9,8 @@ exports.getNodeChildren = getNodeChildren;
 /* eslint-disable @typescript-eslint/no-loop-func */
 
 function getNodeChildren(nodes, id, onlyOpenChildren = true) {
-  const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open));
-  return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
+  const directChildren = nodes.filter(node => node.parentId === id);
+  return directChildren.flatMap(child => [...(!onlyOpenChildren || child.context?.open ? [child] : []), ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
 }
 function getDeepestNode(nodes, id) {
   let deepestNodeId;

package/floating-ui-react/utils/shadowDom.d.ts

@@ -0,0 +1,3 @@
+export declare function activeElement(doc: Document): Element | null;
+export declare function contains(parent?: Element | null, child?: Element | null): boolean;
+export declare function getTarget(event: Event): EventTarget | null;

package/floating-ui-react/utils/shadowDom.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.activeElement = activeElement;
+exports.contains = contains;
+exports.getTarget = getTarget;
+var _dom = require("@floating-ui/utils/dom");
+function activeElement(doc) {
+  let element = doc.activeElement;
+  while (element?.shadowRoot?.activeElement != null) {
+    element = element.shadowRoot.activeElement;
+  }
+  return element;
+}
+function contains(parent, child) {
+  if (!parent || !child) {
+    return false;
+  }
+  const rootNode = child.getRootNode?.();
+
+  // First, attempt with the faster native method.
+  if (parent.contains(child)) {
+    return true;
+  }
+
+  // Then fall back to traversing out of shadow roots when needed.
+  if (rootNode && (0, _dom.isShadowRoot)(rootNode)) {
+    let next = child;
+    while (next) {
+      if (parent === next) {
+        return true;
+      }
+      next = next.parentNode || next.host;
+    }
+  }
+  return false;
+}
+function getTarget(event) {
+  if ('composedPath' in event) {
+    return event.composedPath()[0];
+  }
+
+  // TS assumes `composedPath()` always exists, but older browsers without
+  // shadow DOM support still fall back to `target`.
+  return event.target;
+}

package/floating-ui-react/utils/tabbable.d.ts

@@ -1,8 +1,7 @@
-import { type FocusableElement } from 'tabbable';
-export declare const getTabbableOptions: () => {
-  readonly getShadowRoot: true;
-  readonly displayCheck: "none" | "full";
-};
+export type FocusableElement = HTMLElement | SVGElement;
+export declare function isTabbable(element: Element | null): boolean;
+export declare function focusable(container: Element): FocusableElement[];
+export declare function tabbable(container: Element): FocusableElement[];
 export declare function getNextTabbable(referenceElement: Element | null): FocusableElement | null;
 export declare function getPreviousTabbable(referenceElement: Element | null): FocusableElement | null;
 export declare function getTabbableAfterElement(referenceElement: Element | null): FocusableElement | null;

package/floating-ui-react/utils/tabbable.js

@@ -5,26 +5,139 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.disableFocusInside = disableFocusInside;
 exports.enableFocusInside = enableFocusInside;
+exports.focusable = focusable;
 exports.getNextTabbable = getNextTabbable;
 exports.getPreviousTabbable = getPreviousTabbable;
 exports.getTabbableAfterElement = getTabbableAfterElement;
 exports.getTabbableBeforeElement = getTabbableBeforeElement;
-exports.getTabbableOptions = void 0;
 exports.isOutsideEvent = isOutsideEvent;
-var _tabbable = require("tabbable");
+exports.isTabbable = isTabbable;
+exports.tabbable = tabbable;
+var _dom = require("@floating-ui/utils/dom");
 var _owner = require("@base-ui/utils/owner");
 var _element = require("./element");
-const getTabbableOptions = () => ({
-  getShadowRoot: true,
-  displayCheck:
-  // JSDOM does not support the `tabbable` library. To solve this we can
-  // check if `ResizeObserver` is a real function (not polyfilled), which
-  // determines if the current environment is JSDOM-like.
-  typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
-});
-exports.getTabbableOptions = getTabbableOptions;
+var _composite = require("./composite");
+const CANDIDATE_SELECTOR = 'a[href],button,input,select,textarea,summary,details,iframe,object,embed,[tabindex],[contenteditable]:not([contenteditable="false"]),audio[controls],video[controls]';
+function getParentElement(element) {
+  const assignedSlot = element.assignedSlot;
+  if (assignedSlot) {
+    return assignedSlot;
+  }
+  if (element.parentElement) {
+    return element.parentElement;
+  }
+  const rootNode = element.getRootNode();
+  return (0, _dom.isShadowRoot)(rootNode) ? rootNode.host : null;
+}
+function getDetailsSummary(details) {
+  for (const child of Array.from(details.children)) {
+    if ((0, _dom.getNodeName)(child) === 'summary') {
+      return child;
+    }
+  }
+  return null;
+}
+function isWithinOpenDetailsSummary(element, details) {
+  const summary = getDetailsSummary(details);
+  return !!summary && (element === summary || (0, _element.contains)(summary, element));
+}
+function isFocusableCandidate(element) {
+  const nodeName = element ? (0, _dom.getNodeName)(element) : '';
+  return element != null && element.matches(CANDIDATE_SELECTOR) && (nodeName !== 'summary' || element.parentElement != null && (0, _dom.getNodeName)(element.parentElement) === 'details' && getDetailsSummary(element.parentElement) === element) && (nodeName !== 'details' || getDetailsSummary(element) == null) && (nodeName !== 'input' || element.type !== 'hidden');
+}
+function isFocusableElement(element) {
+  if (!isFocusableCandidate(element) || !element.isConnected || element.matches(':disabled')) {
+    return false;
+  }
+  for (let current = element; current; current = getParentElement(current)) {
+    const isSlot = (0, _dom.getNodeName)(current) === 'slot';
+    if (current.hasAttribute('inert')) {
+      return false;
+    }
+    if (current !== element && (0, _dom.getNodeName)(current) === 'details' && !current.open && !isWithinOpenDetailsSummary(element, current) || current.hasAttribute('hidden') || !isSlot && !(0, _composite.isElementVisible)(current)) {
+      return false;
+    }
+  }
+  return true;
+}
+function getTabIndex(element) {
+  const tabIndex = element.tabIndex;
+  if (tabIndex < 0) {
+    const nodeName = (0, _dom.getNodeName)(element);
+    if (nodeName === 'details' || nodeName === 'audio' || nodeName === 'video' || (0, _dom.isHTMLElement)(element) && element.isContentEditable) {
+      return 0;
+    }
+  }
+  return tabIndex;
+}
+function getNamedRadioInput(element) {
+  if ((0, _dom.getNodeName)(element) !== 'input') {
+    return null;
+  }
+  const input = element;
+  return input.type === 'radio' && input.name !== '' ? input : null;
+}
+function isTabbableRadio(element, candidates) {
+  const input = getNamedRadioInput(element);
+  if (!input) {
+    return true;
+  }
+  const checkedRadio = candidates.find(candidate => {
+    const radio = getNamedRadioInput(candidate);
+    return radio?.name === input.name && radio.form === input.form && radio.checked;
+  });
+  if (checkedRadio) {
+    return checkedRadio === input;
+  }
+  return candidates.find(candidate => {
+    const radio = getNamedRadioInput(candidate);
+    return radio?.name === input.name && radio.form === input.form;
+  }) === input;
+}
+function getComposedChildren(container) {
+  if ((0, _dom.isHTMLElement)(container) && (0, _dom.getNodeName)(container) === 'slot') {
+    const assignedElements = container.assignedElements({
+      flatten: true
+    });
+    if (assignedElements.length > 0) {
+      return assignedElements;
+    }
+  }
+  if ((0, _dom.isHTMLElement)(container) && container.shadowRoot) {
+    return Array.from(container.shadowRoot.children);
+  }
+  return Array.from(container.children);
+}
+function appendCandidates(container, list) {
+  getComposedChildren(container).forEach(child => {
+    if (isFocusableCandidate(child)) {
+      list.push(child);
+    }
+    appendCandidates(child, list);
+  });
+}
+function appendMatchingElements(container, selector, list) {
+  getComposedChildren(container).forEach(child => {
+    if ((0, _dom.isHTMLElement)(child) && child.matches(selector)) {
+      list.push(child);
+    }
+    appendMatchingElements(child, selector, list);
+  });
+}
+function isTabbable(element) {
+  return isFocusableElement(element) && getTabIndex(element) >= 0;
+}
+function focusable(container) {
+  const candidates = [];
+  appendCandidates(container, candidates);
+  return candidates.filter(isFocusableElement);
+}
+function tabbable(container) {
+  const candidates = focusable(container);
+  return candidates.filter(element => getTabIndex(element) >= 0 && isTabbableRadio(element, candidates));
+}
 function getTabbableIn(container, dir) {
-  const list = (0, _tabbable.tabbable)(container, getTabbableOptions());
+  const list = tabbable(container);
   const len = list.length;
   if (len === 0) {
     return undefined;
@@ -45,7 +158,7 @@ function getTabbableNearElement(referenceElement, dir) {
   if (!referenceElement) {
     return null;
   }
-  const list = (0, _tabbable.tabbable)((0, _owner.ownerDocument)(referenceElement).body, getTabbableOptions());
+  const list = tabbable((0, _owner.ownerDocument)(referenceElement).body);
   const elementCount = list.length;
   if (elementCount === 0) {
     return null;
@@ -69,14 +182,15 @@ function isOutsideEvent(event, container) {
   return !relatedTarget || !(0, _element.contains)(containerElement, relatedTarget);
 }
 function disableFocusInside(container) {
-  const tabbableElements = (0, _tabbable.tabbable)(container, getTabbableOptions());
+  const tabbableElements = tabbable(container);
   tabbableElements.forEach(element => {
     element.dataset.tabindex = element.getAttribute('tabindex') || '';
     element.setAttribute('tabindex', '-1');
   });
 }
 function enableFocusInside(container) {
-  const elements = container.querySelectorAll('[data-tabindex]');
+  const elements = [];
+  appendMatchingElements(container, '[data-tabindex]', elements);
   elements.forEach(element => {
     const tabindex = element.dataset.tabindex;
     delete element.dataset.tabindex;

package/form/Form.js

@@ -30,6 +30,7 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     onSubmit,
     onFormSubmit,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
   const formRef = React.useRef({

package/index.d.ts

@@ -22,6 +22,7 @@ export * from "./merge-props/index.js";
 export * from "./meter/index.js";
 export * from "./navigation-menu/index.js";
 export * from "./number-field/index.js";
+export * from "./otp-field/index.js";
 export * from "./popover/index.js";
 export * from "./preview-card/index.js";
 export * from "./progress/index.js";