@tamagui/tabs-headless 2.7.7 → 3.0.0-beta.643.1

package/types/useTabs.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 export type TabsActivationMode = 'automatic' | 'manual';
 export type TabsOrientation = 'horizontal' | 'vertical';
 export type Direction = 'ltr' | 'rtl';
+export declare function makeTriggerId(baseId: string, value: string): string;
+export declare function makeContentId(baseId: string, value: string): string;
 export interface UseTabsProps {
     /** The value for the selected tab, if controlled */
     value?: string;
@@ -10,120 +12,97 @@ export interface UseTabsProps {
     /** A function called when a new tab is selected */
     onValueChange?: (value: string) => void;
     /**
-     * The orientation the tabs are layed out.
-     * Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+     * The orientation the tabs are laid out.
      * @defaultValue horizontal
      */
     orientation?: TabsOrientation;
-    /**
-     * The direction of navigation between toolbar items.
-     */
+    /** The direction of navigation between tab triggers. */
     dir?: Direction;
     /**
-     * Whether a tab is activated automatically (on focus) or manually (on click/enter).
+     * Whether a tab is activated automatically (on focus) or manually (on press/enter).
+     * Automatic activation is web-only; native always activates manually.
      * @defaultValue automatic
      */
     activationMode?: TabsActivationMode;
-    /**
-     * Whether keyboard navigation should loop from last to first and vice versa.
-     * @defaultValue true
-     */
-    loop?: boolean;
 }
-export interface UseTabsReturn {
-    /** The currently selected tab value */
+export declare function useTabs(props?: UseTabsProps): {
     value: string;
-    /** Function to change the selected tab */
-    setValue: (value: string) => void;
-    /** The resolved text direction */
-    direction: Direction;
-    /** Props to spread on the tabs container element */
+    setValue: import("@tamagui/use-controllable-state").ControllableStateSetter<string, import("@tamagui/web").TamaguiChangeEventDetails>;
+    baseId: string;
+    direction: "ltr" | "rtl";
+    orientation: TabsOrientation;
+    activationMode: TabsActivationMode;
+    triggersCount: number;
+    registerTrigger: () => void;
+    unregisterTrigger: () => void;
     tabsProps: {
         'data-orientation': TabsOrientation;
-        dir: Direction;
     };
-    /** Props to spread on the tab list element */
+};
+export interface UseTabsListProps {
+    orientation?: TabsOrientation;
+    /** Disables every trigger in the list. */
+    disabled?: boolean;
+}
+export declare function useTabsList(props: UseTabsListProps): {
     listProps: {
         role: 'tablist';
         'aria-orientation': TabsOrientation;
+        'aria-disabled': true | undefined;
+        'data-orientation': TabsOrientation;
+        'data-disabled': "" | undefined;
     };
-    /** Function to get props for a tab trigger */
-    getTabProps: (tabValue: string, disabled?: boolean) => TabTriggerProps;
-    /** Function to get props for a tab content panel */
-    getContentProps: (tabValue: string) => TabContentProps;
-    /** Context value to provide to child components */
-    contextValue: TabsContextValue;
-}
-export interface TabTriggerProps {
-    role: 'tab';
-    id: string;
-    'aria-selected': boolean;
-    'aria-controls': string;
-    'data-state': 'active' | 'inactive';
-    'data-disabled'?: '';
-    disabled?: boolean;
-    tabIndex: number;
-    onKeyDown: (event: React.KeyboardEvent) => void;
-    onClick: (event: React.MouseEvent) => void;
-    onFocus: (event: React.FocusEvent) => void;
-}
-export interface TabContentProps {
-    role: 'tabpanel';
-    id: string;
-    'aria-labelledby': string;
-    'data-state': 'active' | 'inactive';
-    'data-orientation': TabsOrientation;
-    hidden: boolean;
-    tabIndex: 0;
-}
-export interface TabsContextValue {
-    baseId: string;
-    value: string;
-    setValue: (value: string) => void;
-    orientation: TabsOrientation;
-    direction: Direction;
-    activationMode: TabsActivationMode;
-    loop: boolean;
-}
-export declare function useTabs(props?: UseTabsProps): UseTabsReturn;
-export declare const TabsProvider: React.Provider<TabsContextValue | null>;
-export declare function useTabsContext(): TabsContextValue;
+};
+/** the fields the primary-pointer check reads off a web press event */
+export type TabPressEvent = {
+    button?: number;
+    ctrlKey?: boolean;
+};
 export interface UseTabProps {
+    baseId: string;
+    /** The value this trigger selects. */
     value: string;
+    /** The currently selected value. */
+    selectedValue?: string;
     disabled?: boolean;
-    onPress?: (event: any) => void;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    onFocus?: (event: React.FocusEvent) => void;
+    activationMode?: TabsActivationMode;
+    onChange: (value: string) => void;
 }
 export declare function useTab(props: UseTabProps): {
     isSelected: boolean;
+    triggerId: string;
+    contentId: string;
     tabProps: {
-        disabled: boolean | undefined;
-        tabIndex: number;
-        onKeyDown: import("@tamagui/helpers").EventHandler<React.KeyboardEvent<Element>> | undefined;
-        onPress: import("@tamagui/helpers").EventHandler<any> | undefined;
-        onFocus: import("@tamagui/helpers").EventHandler<React.FocusEvent<Element, Element>> | undefined;
-        'data-disabled'?: "" | undefined;
-        ref: React.RefObject<HTMLElement | null>;
-        role: "tab";
+        role: 'tab';
         id: string;
         'aria-selected': boolean;
         'aria-controls': string;
-        'data-state': string;
+        'data-state': "active" | "inactive";
+        'data-disabled': "" | undefined;
+        disabled: boolean;
+        onPress: (event?: TabPressEvent) => void;
+        onKeyDown?: ((event: React.KeyboardEvent) => void) | undefined;
+        onFocus?: (() => void) | undefined;
     };
 };
 export interface UseTabContentProps {
+    baseId: string;
+    /** The value that selects this content. */
     value: string;
+    /** The currently selected value. */
+    selectedValue?: string;
+    orientation?: TabsOrientation;
+    /** Mounts the content even when its value is not selected. */
     forceMount?: boolean;
 }
 export declare function useTabContent(props: UseTabContentProps): {
     isSelected: boolean;
     shouldMount: boolean;
     contentProps: {
-        role: "tabpanel";
+        role: 'tabpanel';
         id: string;
         'aria-labelledby': string;
-        'data-state': string;
+        'data-state': "active" | "inactive";
         'data-orientation': TabsOrientation;
         hidden: boolean;
         tabIndex: number;

package/types/useTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTabs.d.ts","sourceRoot":"","sources":["../src/useTabs.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTabs.d.ts","sourceRoot":"","sources":["../src/useTabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,QAAQ,CAAA;AACvD,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAA;AAIrC,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAE1D;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAE1D;AAMD,MAAM,WAAW,YAAY;IAC3B,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,wDAAwD;IACxD,GAAG,CAAC,EAAE,SAAS,CAAA;IACf;;;;OAIG;IACH,cAAc,CAAC,EAAE,kBAAkB,CAAA;CACpC;AAED,wBAAgB,OAAO,CAAC,KAAK,GAAE,YAAiB;;;;;;;;;;;QAyC1C,kBAAkB;;EAGvB;AAMD,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB;IAI/C,SAAS;QACP,IAAI,EAAE,SAAS;QACf,kBAAkB;QAClB,eAAe;QACf,kBAAkB;QAClB,eAAe;;EAGpB;AAMD,uEAAuE;AACvE,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAA;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW;;;;;cAmB7B,KAAK;;;;;;;0BAOO,aAAa;6BASV,KAAK,CAAC,aAAa;;;EAc7C;AAMD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB;;;;QAUjD,IAAI,EAAE,UAAU;QAChB,EAAE;QACF,iBAAiB;QACjB,YAAY;QACZ,kBAAkB;QAClB,MAAM;QACN,QAAQ;;EAGb"}

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/esm/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/esm/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}