@zag-js/tabs 0.49.0 → 0.51.0

package/dist/index.d.mts

@@ -29,7 +29,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    translations: IntlTranslations;
+    translations?: IntlTranslations;
     /**
      * Whether the keyboard navigation will loop from last tab to first, and vice versa.
      * @default true
@@ -51,6 +51,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * The activation mode of the tabs. Can be `manual` or `automatic`
      * - `manual`: Tabs are activated when clicked or press `enter` key.
      * - `automatic`: Tabs are activated when receiving focus
+     *
      * @default "automatic"
      */
     activationMode?: "manual" | "automatic";
@@ -62,20 +63,13 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Callback to be called when the focused tab changes
      */
     onFocusChange?: (details: FocusChangeDetails) => void;
-}
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * Whether the tab is in the horizontal orientation
-     */
-    isHorizontal: boolean;
     /**
-     * @computed
-     * Whether the tab is in the vertical orientation
+     * Whether the tab is composite
      */
-    isVertical: boolean;
-}>;
+    composite: boolean;
+}
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{}>;
 interface PrivateContext {
 }
 interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
@@ -136,6 +130,23 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Sets the indicator rect to the tab with the given value
      */
     setIndicatorRect(value: string): void;
+    /**
+     * Synchronizes the tab index of the content element.
+     * Useful when rendering tabs within a select or combobox
+     */
+    syncTabIndex(): void;
+    /**
+     * Set focus on the selected tab trigger
+     */
+    focus(): void;
+    /**
+     * Selects the next tab
+     */
+    selectNext(fromValue?: string): void;
+    /**
+     * Selects the previous tab
+     */
+    selectPrev(fromValue?: string): void;
     /**
      * Returns the state of the trigger with the given props
      */
@@ -151,8 +162,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode">];
+declare const props: ("value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];

package/dist/index.d.ts

@@ -29,7 +29,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    translations: IntlTranslations;
+    translations?: IntlTranslations;
     /**
      * Whether the keyboard navigation will loop from last tab to first, and vice versa.
      * @default true
@@ -51,6 +51,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * The activation mode of the tabs. Can be `manual` or `automatic`
      * - `manual`: Tabs are activated when clicked or press `enter` key.
      * - `automatic`: Tabs are activated when receiving focus
+     *
      * @default "automatic"
      */
     activationMode?: "manual" | "automatic";
@@ -62,20 +63,13 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Callback to be called when the focused tab changes
      */
     onFocusChange?: (details: FocusChangeDetails) => void;
-}
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * Whether the tab is in the horizontal orientation
-     */
-    isHorizontal: boolean;
     /**
-     * @computed
-     * Whether the tab is in the vertical orientation
+     * Whether the tab is composite
      */
-    isVertical: boolean;
-}>;
+    composite: boolean;
+}
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{}>;
 interface PrivateContext {
 }
 interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
@@ -136,6 +130,23 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Sets the indicator rect to the tab with the given value
      */
     setIndicatorRect(value: string): void;
+    /**
+     * Synchronizes the tab index of the content element.
+     * Useful when rendering tabs within a select or combobox
+     */
+    syncTabIndex(): void;
+    /**
+     * Set focus on the selected tab trigger
+     */
+    focus(): void;
+    /**
+     * Selects the next tab
+     */
+    selectNext(fromValue?: string): void;
+    /**
+     * Selects the previous tab
+     */
+    selectPrev(fromValue?: string): void;
     /**
      * Returns the state of the trigger with the given props
      */
@@ -151,8 +162,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode">];
+declare const props: ("value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];