@base-ui/react 1.5.0 → 1.6.0

package/accordion/panel/AccordionPanel.mjs

@@ -0,0 +1,122 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { warn } from '@base-ui/utils/warn';
+import { resolveStyle } from "../../utils/resolveStyle.mjs";
+import { useCollapsibleRootContext } from "../../collapsible/root/CollapsibleRootContext.mjs";
+import { useCollapsiblePanel } from "../../collapsible/panel/useCollapsiblePanel.mjs";
+import { useAccordionRootContext } from "../root/AccordionRootContext.mjs";
+import { useAccordionItemContext } from "../item/AccordionItemContext.mjs";
+import { accordionStateAttributesMapping } from "../item/stateAttributesMapping.mjs";
+import { AccordionPanelCssVars } from "./AccordionPanelCssVars.mjs";
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+/**
+ * A collapsible panel with the accordion item contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export const AccordionPanel = /*#__PURE__*/React.forwardRef(function AccordionPanel(componentProps, forwardedRef) {
+  const {
+    className,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    id: idProp,
+    render,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    hiddenUntilFound: contextHiddenUntilFound,
+    keepMounted: contextKeepMounted
+  } = useAccordionRootContext();
+  const {
+    mounted,
+    onOpenChange,
+    open,
+    panelId,
+    setMounted,
+    setOpen,
+    setPanelIdState,
+    transitionStatus
+  } = useCollapsibleRootContext();
+  const hiddenUntilFound = hiddenUntilFoundProp ?? contextHiddenUntilFound;
+  const keepMounted = keepMountedProp ?? contextKeepMounted;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsoLayoutEffect(() => {
+      if (keepMountedProp === false && hiddenUntilFound) {
+        warn('The `keepMounted={false}` prop on an `Accordion.Panel` is ignored when `hiddenUntilFound` is enabled on the panel or root, since the panel must remain mounted while closed.');
+      }
+    }, [hiddenUntilFound, keepMountedProp]);
+  }
+  useIsoLayoutEffect(() => {
+    if (idProp) {
+      setPanelIdState(idProp);
+      return () => {
+        setPanelIdState(undefined);
+      };
+    }
+    return undefined;
+  }, [idProp, setPanelIdState]);
+  const {
+    height,
+    props,
+    ref,
+    shouldPreventOpenAnimation,
+    shouldRender,
+    transitionStatus: panelTransitionStatus,
+    width
+  } = useCollapsiblePanel({
+    externalRef: forwardedRef,
+    hiddenUntilFound,
+    id: idProp ?? panelId,
+    keepMounted,
+    mounted,
+    onOpenChange,
+    open,
+    setMounted,
+    setOpen,
+    transitionStatus
+  });
+  const {
+    state,
+    triggerId
+  } = useAccordionItemContext();
+  const panelState = {
+    ...state,
+    transitionStatus: panelTransitionStatus
+  };
+  const resolvedStyle = resolveStyle(style, panelState);
+  const element = useRenderElement('div', {
+    ...componentProps,
+    style: undefined
+  }, {
+    state: panelState,
+    ref,
+    props: [props, {
+      'aria-labelledby': triggerId,
+      role: 'region',
+      style: {
+        [AccordionPanelCssVars.accordionPanelHeight]: height === undefined ? 'auto' : `${height}px`,
+        [AccordionPanelCssVars.accordionPanelWidth]: width === undefined ? 'auto' : `${width}px`
+      }
+    }, elementProps, resolvedStyle ? {
+      style: resolvedStyle
+    } : undefined,
+    // Resolve the public `style` prop so temporary `animationName: 'none'`
+    // can still win after user's inline styles have been merged.
+    shouldPreventOpenAnimation ? {
+      style: {
+        animationName: 'none'
+      }
+    } : undefined],
+    stateAttributesMapping: accordionStateAttributesMapping
+  });
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") AccordionPanel.displayName = "AccordionPanel";

package/accordion/panel/AccordionPanelDataAttributes.mjs

@@ -0,0 +1,29 @@
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.mjs";
+export let AccordionPanelDataAttributes = function (AccordionPanelDataAttributes) {
+  /**
+   * Indicates the index of the accordion item.
+   * @type {number}
+   */
+  AccordionPanelDataAttributes["index"] = "data-index";
+  /**
+   * Present when the accordion panel is open.
+   */
+  AccordionPanelDataAttributes["open"] = "data-open";
+  /**
+   * Indicates the orientation of the accordion.
+   */
+  AccordionPanelDataAttributes["orientation"] = "data-orientation";
+  /**
+   * Present when the accordion item is disabled.
+   */
+  AccordionPanelDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the panel is animating in.
+   */
+  AccordionPanelDataAttributes[AccordionPanelDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the panel is animating out.
+   */
+  AccordionPanelDataAttributes[AccordionPanelDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return AccordionPanelDataAttributes;
+}({});

package/accordion/root/AccordionRoot.d.mts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { BaseUIComponentProps, Orientation } from "../../internals/types.mjs";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
+import { REASONS } from "../../internals/reasons.mjs";
+/**
+ * Groups all parts of the accordion.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export declare const AccordionRoot: {
+  <Value = any>(props: AccordionRoot.Props<Value>): React.JSX.Element;
+};
+export type AccordionValue<Value = any> = Value[];
+export interface AccordionRootState<Value = any> {
+  /**
+   * The current value.
+   */
+  value: AccordionValue<Value>;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * The component orientation.
+   *
+   * Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
+   * to remove roving focus.
+   *
+   * This state no longer affects keyboard focus behavior.
+   * @deprecated
+   */
+  orientation: Orientation;
+}
+export interface AccordionRootProps<Value = any> extends BaseUIComponentProps<'div', AccordionRoot.State<Value>> {
+  /**
+   * The controlled value of the item(s) that should be expanded.
+   *
+   * To render an uncontrolled accordion, use the `defaultValue` prop instead.
+   */
+  value?: AccordionValue<Value> | undefined;
+  /**
+   * The uncontrolled value of the item(s) that should be initially expanded.
+   *
+   * To render a controlled accordion, use the `value` prop instead.
+   */
+  defaultValue?: AccordionValue<Value> | undefined;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Allows the browser's built-in page search to find and expand the panel contents.
+   *
+   * Overrides the `keepMounted` prop and uses `hidden="until-found"`
+   * to hide the element without removing it from the DOM.
+   * @default false
+   */
+  hiddenUntilFound?: boolean | undefined;
+  /**
+   * Whether to keep the element in the DOM while the panel is closed.
+   * This prop is ignored when `hiddenUntilFound` is used.
+   * @default false
+   */
+  keepMounted?: boolean | undefined;
+  /**
+   * Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
+   * to remove roving focus.
+   *
+   * This prop no longer affects keyboard focus behavior.
+   * @deprecated
+   */
+  loopFocus?: boolean | undefined;
+  /**
+   * Event handler called when an accordion item is expanded or collapsed.
+   * Provides the new value as an argument.
+   */
+  onValueChange?: ((value: AccordionValue<Value>, eventDetails: AccordionRootChangeEventDetails) => void) | undefined;
+  /**
+   * Whether multiple items can be open at the same time.
+   * @default false
+   */
+  multiple?: boolean | undefined;
+  /**
+   * Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
+   * to remove roving focus.
+   *
+   * This prop no longer affects keyboard focus behavior.
+   * @default 'vertical'
+   * @deprecated
+   */
+  orientation?: Orientation | undefined;
+}
+export type AccordionRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
+export type AccordionRootChangeEventDetails = BaseUIChangeEventDetails<AccordionRoot.ChangeEventReason>;
+export declare namespace AccordionRoot {
+  type Value<TValue = any> = AccordionValue<TValue>;
+  type State<TValue = any> = AccordionRootState<TValue>;
+  type Props<TValue = any> = AccordionRootProps<TValue>;
+  type ChangeEventReason = AccordionRootChangeEventReason;
+  type ChangeEventDetails = AccordionRootChangeEventDetails;
+}

package/accordion/root/AccordionRoot.d.ts

@@ -23,6 +23,12 @@ export interface AccordionRootState<Value = any> {
   disabled: boolean;
   /**
    * The component orientation.
+   *
+   * Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
+   * to remove roving focus.
+   *
+   * This state no longer affects keyboard focus behavior.
+   * @deprecated
    */
   orientation: Orientation;
 }
@@ -59,9 +65,11 @@ export interface AccordionRootProps<Value = any> extends BaseUIComponentProps<'d
    */
   keepMounted?: boolean | undefined;
   /**
-   * Whether to loop keyboard focus back to the first item
-   * when the end of the list is reached while using the arrow keys.
-   * @default true
+   * Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
+   * to remove roving focus.
+   *
+   * This prop no longer affects keyboard focus behavior.
+   * @deprecated
    */
   loopFocus?: boolean | undefined;
   /**
@@ -75,9 +83,12 @@ export interface AccordionRootProps<Value = any> extends BaseUIComponentProps<'d
    */
   multiple?: boolean | undefined;
   /**
-   * The visual orientation of the accordion.
-   * Controls whether roving focus uses left/right or up/down arrow keys.
+   * Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434)
+   * to remove roving focus.
+   *
+   * This prop no longer affects keyboard focus behavior.
    * @default 'vertical'
+   * @deprecated
    */
   orientation?: Orientation | undefined;
 }

package/accordion/root/AccordionRoot.js

@@ -15,8 +15,6 @@ var _CompositeList = require("../../internals/composite/list/CompositeList");
 var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _AccordionRootContext = require("./AccordionRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
-var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
-var _reasons = require("../../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
 const rootStateAttributesMapping = {
   value: () => null
@@ -35,7 +33,7 @@ const AccordionRoot = exports.AccordionRoot = /*#__PURE__*/React.forwardRef(func
     disabled = false,
     hiddenUntilFound: hiddenUntilFoundProp,
     keepMounted: keepMountedProp,
-    loopFocus = true,
+    loopFocus,
     onValueChange,
     multiple = false,
     orientation = 'vertical',
@@ -69,8 +67,7 @@ const AccordionRoot = exports.AccordionRoot = /*#__PURE__*/React.forwardRef(func
     name: 'Accordion',
     state: 'value'
   });
-  const handleValueChange = (0, _useStableCallback.useStableCallback)((newValue, nextOpen) => {
-    const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none);
+  const handleValueChange = (0, _useStableCallback.useStableCallback)((newValue, nextOpen, details) => {
     if (!multiple) {
       const nextValue = value[0] === newValue ? [] : [newValue];
       onValueChange?.(nextValue, details);
@@ -101,23 +98,18 @@ const AccordionRoot = exports.AccordionRoot = /*#__PURE__*/React.forwardRef(func
     orientation
   }), [value, disabled, orientation]);
   const contextValue = React.useMemo(() => ({
-    accordionItemRefs,
-    direction,
     disabled,
     handleValueChange,
     hiddenUntilFound: hiddenUntilFoundProp ?? false,
     keepMounted: keepMountedProp ?? false,
-    loopFocus,
-    orientation,
     state,
     value
-  }), [direction, disabled, handleValueChange, hiddenUntilFoundProp, keepMountedProp, loopFocus, orientation, state, value]);
+  }), [disabled, handleValueChange, hiddenUntilFoundProp, keepMountedProp, state, value]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,
     props: [{
-      dir: direction,
-      role: 'region'
+      dir: direction
     }, elementProps],
     stateAttributesMapping: rootStateAttributesMapping
   });

package/accordion/root/AccordionRoot.mjs

@@ -0,0 +1,118 @@
+'use client';
+
+import * as React from 'react';
+import { useControlled } from '@base-ui/utils/useControlled';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { warn } from '@base-ui/utils/warn';
+import { CompositeList } from "../../internals/composite/list/CompositeList.mjs";
+import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
+import { AccordionRootContext } from "./AccordionRootContext.mjs";
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const rootStateAttributesMapping = {
+  value: () => null
+};
+
+/**
+ * Groups all parts of the accordion.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export const AccordionRoot = /*#__PURE__*/React.forwardRef(function AccordionRoot(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    hiddenUntilFound: hiddenUntilFoundProp,
+    keepMounted: keepMountedProp,
+    loopFocus,
+    onValueChange,
+    multiple = false,
+    orientation = 'vertical',
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    style,
+    ...elementProps
+  } = componentProps;
+  const direction = useDirection();
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsoLayoutEffect(() => {
+      if (hiddenUntilFoundProp && keepMountedProp === false) {
+        warn('The `keepMounted={false}` prop on `Accordion.Root` is ignored when `hiddenUntilFound` is enabled, since panels must remain mounted while closed.');
+      }
+    }, [hiddenUntilFoundProp, keepMountedProp]);
+  }
+
+  // memoized to allow omitting both defaultValue and value
+  // which would otherwise trigger a warning in useControlled
+  const defaultValue = React.useMemo(() => {
+    if (valueProp === undefined) {
+      return defaultValueProp ?? [];
+    }
+    return undefined;
+  }, [valueProp, defaultValueProp]);
+  const accordionItemRefs = React.useRef([]);
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: 'Accordion',
+    state: 'value'
+  });
+  const handleValueChange = useStableCallback((newValue, nextOpen, details) => {
+    if (!multiple) {
+      const nextValue = value[0] === newValue ? [] : [newValue];
+      onValueChange?.(nextValue, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextValue);
+    } else if (nextOpen) {
+      const nextOpenValues = value.slice();
+      nextOpenValues.push(newValue);
+      onValueChange?.(nextOpenValues, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextOpenValues);
+    } else {
+      const nextOpenValues = value.filter(v => v !== newValue);
+      onValueChange?.(nextOpenValues, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setValue(nextOpenValues);
+    }
+  });
+  const state = React.useMemo(() => ({
+    value,
+    disabled,
+    orientation
+  }), [value, disabled, orientation]);
+  const contextValue = React.useMemo(() => ({
+    disabled,
+    handleValueChange,
+    hiddenUntilFound: hiddenUntilFoundProp ?? false,
+    keepMounted: keepMountedProp ?? false,
+    state,
+    value
+  }), [disabled, handleValueChange, hiddenUntilFoundProp, keepMountedProp, state, value]);
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      dir: direction
+    }, elementProps],
+    stateAttributesMapping: rootStateAttributesMapping
+  });
+  return /*#__PURE__*/_jsx(AccordionRootContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(CompositeList, {
+      elementsRef: accordionItemRefs,
+      children: element
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") AccordionRoot.displayName = "AccordionRoot";

package/accordion/root/AccordionRootContext.d.mts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { AccordionRoot } from "./AccordionRoot.mjs";
+export interface AccordionRootContext<Value = any> {
+  disabled: boolean;
+  handleValueChange: (newValue: AccordionRoot.Value<Value>[number], nextOpen: boolean, eventDetails: AccordionRoot.ChangeEventDetails) => void;
+  hiddenUntilFound: boolean;
+  keepMounted: boolean;
+  state: AccordionRoot.State<Value>;
+  value: AccordionRoot.Value<Value>;
+}
+export declare const AccordionRootContext: React.Context<AccordionRootContext<any> | undefined>;
+export declare function useAccordionRootContext<Value = any>(): AccordionRootContext<Value>;

package/accordion/root/AccordionRootContext.d.ts

@@ -1,16 +1,10 @@
 import * as React from 'react';
-import type { Orientation } from "../../internals/types.js";
-import type { TextDirection } from "../../direction-provider/index.js";
 import type { AccordionRoot } from "./AccordionRoot.js";
 export interface AccordionRootContext<Value = any> {
-  accordionItemRefs: React.RefObject<(HTMLElement | null)[]>;
-  direction: TextDirection;
   disabled: boolean;
-  handleValueChange: (newValue: AccordionRoot.Value<Value>[number], nextOpen: boolean) => void;
+  handleValueChange: (newValue: AccordionRoot.Value<Value>[number], nextOpen: boolean, eventDetails: AccordionRoot.ChangeEventDetails) => void;
   hiddenUntilFound: boolean;
   keepMounted: boolean;
-  loopFocus: boolean;
-  orientation: Orientation;
   state: AccordionRoot.State<Value>;
   value: AccordionRoot.Value<Value>;
 }

package/accordion/trigger/AccordionTrigger.d.mts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.mjs";
+import type { AccordionItemState } from "../item/AccordionItem.mjs";
+/**
+ * A button that opens and closes the corresponding panel.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Accordion](https://base-ui.com/react/components/accordion)
+ */
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface AccordionTriggerState extends AccordionItemState {}
+export interface AccordionTriggerProps extends NativeButtonProps, BaseUIComponentProps<'button', AccordionTriggerState> {}
+export declare namespace AccordionTrigger {
+  type State = AccordionTriggerState;
+  type Props = AccordionTriggerProps;
+}

package/accordion/trigger/AccordionTrigger.js

@@ -7,32 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AccordionTrigger = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _isElementDisabled = require("@base-ui/utils/isElementDisabled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _collapsibleOpenStateMapping = require("../../utils/collapsibleOpenStateMapping");
 var _useButton = require("../../internals/use-button");
 var _CollapsibleRootContext = require("../../collapsible/root/CollapsibleRootContext");
-var _composite = require("../../internals/composite/composite");
-var _AccordionRootContext = require("../root/AccordionRootContext");
 var _AccordionItemContext = require("../item/AccordionItemContext");
 var _useRenderElement = require("../../internals/useRenderElement");
-function getActiveTriggers(accordionItemRefs) {
-  const {
-    current: accordionItemElements
-  } = accordionItemRefs;
-  const output = [];
-  for (let i = 0; i < accordionItemElements.length; i += 1) {
-    const section = accordionItemElements[i];
-    if (!(0, _isElementDisabled.isElementDisabled)(section)) {
-      const trigger = section?.querySelector('[type="button"], [role="button"]');
-      if (trigger && !(0, _isElementDisabled.isElementDisabled)(trigger)) {
-        output.push(trigger);
-      }
-    }
-  }
-  return output;
-}
-
 /**
  * A button that opens and closes the corresponding panel.
  * Renders a `<button>` element.
@@ -56,24 +36,15 @@ const AccordionTrigger = exports.AccordionTrigger = /*#__PURE__*/React.forwardRe
     handleTrigger,
     disabled: contextDisabled
   } = (0, _CollapsibleRootContext.useCollapsibleRootContext)();
-  const disabled = disabledProp ?? contextDisabled;
+  const disabled = disabledProp || contextDisabled;
   const {
     getButtonProps,
     buttonRef
   } = (0, _useButton.useButton)({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton,
-    composite: true
+    native: nativeButton
   });
-  const {
-    accordionItemRefs,
-    direction,
-    loopFocus,
-    orientation
-  } = (0, _AccordionRootContext.useAccordionRootContext)();
-  const isRtl = direction === 'rtl';
-  const isHorizontal = orientation === 'horizontal';
   const {
     state,
     setTriggerId,
@@ -91,74 +62,7 @@ const AccordionTrigger = exports.AccordionTrigger = /*#__PURE__*/React.forwardRe
     'aria-controls': open ? panelId : undefined,
     'aria-expanded': open,
     id,
-    tabIndex: 0,
-    onClick: handleTrigger,
-    onKeyDown(event) {
-      if (!_composite.COMPOSITE_KEYS.has(event.key)) {
-        return;
-      }
-      (0, _composite.stopEvent)(event);
-      const triggers = getActiveTriggers(accordionItemRefs);
-      const numOfEnabledTriggers = triggers.length;
-      const lastIndex = numOfEnabledTriggers - 1;
-      let nextIndex = -1;
-      const thisIndex = triggers.indexOf(event.currentTarget);
-      function toNext() {
-        if (loopFocus) {
-          nextIndex = thisIndex + 1 > lastIndex ? 0 : thisIndex + 1;
-        } else {
-          nextIndex = Math.min(thisIndex + 1, lastIndex);
-        }
-      }
-      function toPrev() {
-        if (loopFocus) {
-          nextIndex = thisIndex === 0 ? lastIndex : thisIndex - 1;
-        } else {
-          nextIndex = thisIndex - 1;
-        }
-      }
-      switch (event.key) {
-        case _composite.ARROW_DOWN:
-          if (!isHorizontal) {
-            toNext();
-          }
-          break;
-        case _composite.ARROW_UP:
-          if (!isHorizontal) {
-            toPrev();
-          }
-          break;
-        case _composite.ARROW_RIGHT:
-          if (isHorizontal) {
-            if (isRtl) {
-              toPrev();
-            } else {
-              toNext();
-            }
-          }
-          break;
-        case _composite.ARROW_LEFT:
-          if (isHorizontal) {
-            if (isRtl) {
-              toNext();
-            } else {
-              toPrev();
-            }
-          }
-          break;
-        case 'Home':
-          nextIndex = 0;
-          break;
-        case 'End':
-          nextIndex = lastIndex;
-          break;
-        default:
-          break;
-      }
-      if (nextIndex > -1) {
-        triggers[nextIndex].focus();
-      }
-    }
+    onClick: handleTrigger
   };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,