@primitiv-ui/react 0.1.40 → 0.1.41

package/dist/Tabs/Tabs.d.ts

@@ -132,6 +132,11 @@ export declare namespace TabsList {
  * move focus without switching the panel — `Enter` or `Space` confirms the
  * selection. Use manual mode for panels that are expensive to render.
  *
+ * **Your `onClick` and `onKeyDown`** run *after* the built-in activation and
+ * keyboard navigation, and cannot veto them: by the time your `onKeyDown` sees
+ * a handled key, `event.defaultPrevented` is already `true`. Use them to observe
+ * or to add behaviour, not to replace the tab contract.
+ *
  * **`asChild` prop.** Pass `asChild` to render an arbitrary child element
  * instead of the default `<button>`. All tab ARIA attributes, event handlers,
  * and the roving `tabIndex` are merged onto the child element following the
@@ -171,7 +176,7 @@ export declare namespace TabsList {
  * </Tabs.Trigger>
  * ```
  */
-export declare function TabsTrigger<T extends HTMLElement = HTMLButtonElement>({ ref: externalRef, children, className, value, onClick, disabled, asChild, ...rest }: TabsTriggerProps<T>): ReactElement;
+export declare function TabsTrigger<T extends HTMLElement = HTMLButtonElement>({ ref: externalRef, children, className, value, onClick, onKeyDown, disabled, asChild, ...rest }: TabsTriggerProps<T>): ReactElement;
 export declare namespace TabsTrigger {
     var displayName: string;
 }

package/dist/Tabs/Tabs.js

@@ -158,6 +158,11 @@ TabsList.displayName = "TabsList";
  * move focus without switching the panel — `Enter` or `Space` confirms the
  * selection. Use manual mode for panels that are expensive to render.
  *
+ * **Your `onClick` and `onKeyDown`** run *after* the built-in activation and
+ * keyboard navigation, and cannot veto them: by the time your `onKeyDown` sees
+ * a handled key, `event.defaultPrevented` is already `true`. Use them to observe
+ * or to add behaviour, not to replace the tab contract.
+ *
  * **`asChild` prop.** Pass `asChild` to render an arbitrary child element
  * instead of the default `<button>`. All tab ARIA attributes, event handlers,
  * and the roving `tabIndex` are merged onto the child element following the
@@ -197,8 +202,8 @@ TabsList.displayName = "TabsList";
  * </Tabs.Trigger>
  * ```
  */
-export function TabsTrigger({ ref: externalRef, children, className = "", value, onClick, disabled = false, asChild = false, ...rest }) {
-    const { buttonRef, triggerId, panelId, isActive, orientation, state, tabIndex, handleClick, handleKeyDown, } = useTabsTrigger({ value, onClick, disabled });
+export function TabsTrigger({ ref: externalRef, children, className = "", value, onClick, onKeyDown, disabled = false, asChild = false, ...rest }) {
+    const { buttonRef, triggerId, panelId, isActive, orientation, state, tabIndex, handleClick, handleKeyDown, } = useTabsTrigger({ value, onClick, onKeyDown, disabled });
     // Compose our internal ref with any external ref the consumer passes.
     // The external ref is cast to match the internal ref's element type —
     // RefObject<T> is invariant in React's types, but at runtime the callback

package/dist/Tabs/hooks/useTabsTrigger.d.ts

@@ -1,6 +1,6 @@
-import { MouseEvent } from "react";
+import { type KeyboardEvent, MouseEvent } from "react";
 import { TabsTriggerProps } from "../types.js";
-export declare function useTabsTrigger({ value, onClick, disabled, }: Pick<TabsTriggerProps, "value" | "onClick" | "disabled">): {
+export declare function useTabsTrigger({ value, onClick, onKeyDown, disabled, }: Pick<TabsTriggerProps, "value" | "onClick" | "onKeyDown" | "disabled">): {
     buttonRef: import("react").RefObject<HTMLButtonElement | null>;
     triggerId: string;
     panelId: string;
@@ -9,5 +9,5 @@ export declare function useTabsTrigger({ value, onClick, disabled, }: Pick<TabsT
     state: string;
     tabIndex: number;
     handleClick: (e: MouseEvent<HTMLButtonElement>) => void;
-    handleKeyDown: (e: import("react").KeyboardEvent<HTMLElement>) => void;
+    handleKeyDown: (e: KeyboardEvent<HTMLButtonElement>) => void;
 };

package/dist/Tabs/hooks/useTabsTrigger.js

@@ -3,7 +3,7 @@ import { useRef, useEffect, useCallback, } from "react";
 import { useRovingTabindex } from "../../hooks/index.js";
 import { getTriggerAndPanelIds } from "../utils.js";
 import { useTabsContext } from "./useTabsContext.js";
-export function useTabsTrigger({ value, onClick, disabled, }) {
+export function useTabsTrigger({ value, onClick, onKeyDown, disabled, }) {
     const { orientation, dir, activationMode, activeValue, isControlled, setActiveValue, onValueChange, onChange, tabsId, registerTrigger, triggerValues, disabledTriggerValues, focusTrigger, } = useTabsContext();
     const isActive = activeValue === value;
     const { triggerId, panelId } = getTriggerAndPanelIds(tabsId, value);
@@ -49,7 +49,7 @@ export function useTabsTrigger({ value, onClick, disabled, }) {
     // *land* on disabled tabs (focus moves there) without activating them —
     // that's the Tabs-specific keyboard contract, distinct from RadioGroup
     // and Accordion which both skip disabled siblings entirely.
-    const { handleKeyDown } = useRovingTabindex({
+    const { handleKeyDown: navigate } = useRovingTabindex({
         orientation,
         dir,
         navigable: triggerValues,
@@ -69,6 +69,13 @@ export function useTabsTrigger({ value, onClick, disabled, }) {
             focusTrigger(targetValue);
         },
     });
+    // A consumer onKeyDown runs AFTER the built-in navigation and cannot veto it,
+    // the same contract handleClick gives onClick. It used to be spread over this
+    // handler and silently disabled arrow-key navigation.
+    function handleKeyDown(e) {
+        navigate(e);
+        onKeyDown?.(e);
+    }
     return {
         buttonRef,
         triggerId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primitiv-ui/react",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "description": "Headless, accessible React components built on the WAI-ARIA authoring patterns. Zero styles ship with this package — bring your own (CSS, Tailwind, CSS-in-JS, design tokens).",
   "type": "module",
   "main": "./dist/index.js",