@zag-js/tabs 2.0.0-next.0 → 2.0.0-next.2

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './tabs.anatomy.mjs';
 export { connect } from './tabs.connect.mjs';
 export { machine } from './tabs.machine.mjs';
 export { contentProps, props, splitContentProps, splitProps, splitTriggerProps, triggerProps } from './tabs.props.mjs';
-export { TabsApi as Api, ContentProps, ElementIds, FocusChangeDetails, IntlTranslations, TabsMachine as Machine, NavigateDetails, TabsProps as Props, TabsService as Service, TriggerProps, TriggerState, ValueChangeDetails } from './tabs.types.mjs';
+export { TabsApi as Api, ContentProps, ContentState, ElementIds, FocusChangeDetails, IntlTranslations, TabsMachine as Machine, NavigateDetails, TabsProps as Props, TabsService as Service, TriggerProps, TriggerState, ValueChangeDetails } from './tabs.types.mjs';
 import '@zag-js/anatomy';
 import '@zag-js/core';
 import '@zag-js/types';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './tabs.anatomy.js';
 export { connect } from './tabs.connect.js';
 export { machine } from './tabs.machine.js';
 export { contentProps, props, splitContentProps, splitProps, splitTriggerProps, triggerProps } from './tabs.props.js';
-export { TabsApi as Api, ContentProps, ElementIds, FocusChangeDetails, IntlTranslations, TabsMachine as Machine, NavigateDetails, TabsProps as Props, TabsService as Service, TriggerProps, TriggerState, ValueChangeDetails } from './tabs.types.js';
+export { TabsApi as Api, ContentProps, ContentState, ElementIds, FocusChangeDetails, IntlTranslations, TabsMachine as Machine, NavigateDetails, TabsProps as Props, TabsService as Service, TriggerProps, TriggerState, ValueChangeDetails } from './tabs.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/core';
 import '@zag-js/types';

package/dist/tabs.connect.js

@@ -51,6 +51,9 @@ function connect(service, normalize) {
       disabled: !!props.disabled
     };
   }
+  function getContentState(props) {
+    return { selected: context.get("value") === props.value };
+  }
   return {
     value: context.get("value"),
     focusedValue: context.get("focusedValue"),
@@ -179,9 +182,10 @@ function connect(service, normalize) {
         }
       });
     },
+    getContentState,
     getContentProps(props) {
       const { value } = props;
-      const selected = context.get("value") === value;
+      const contentState = getContentState(props);
       return normalize.element({
         ...import_tabs.parts.content.attrs(scope.id),
         dir: prop("dir"),
@@ -189,9 +193,9 @@ function connect(service, normalize) {
         tabIndex: !virtualFocus ? 0 : -1,
         "aria-labelledby": dom.getTriggerId(scope, value),
         role: "tabpanel",
-        "data-selected": (0, import_dom_query.dataAttr)(selected),
+        "data-selected": (0, import_dom_query.dataAttr)(contentState.selected),
         "data-orientation": prop("orientation"),
-        hidden: !selected
+        hidden: !contentState.selected
       });
     },
     getIndicatorProps() {

package/dist/tabs.connect.mjs

@@ -25,6 +25,9 @@ function connect(service, normalize) {
       disabled: !!props.disabled
     };
   }
+  function getContentState(props) {
+    return { selected: context.get("value") === props.value };
+  }
   return {
     value: context.get("value"),
     focusedValue: context.get("focusedValue"),
@@ -153,9 +156,10 @@ function connect(service, normalize) {
         }
       });
     },
+    getContentState,
     getContentProps(props) {
       const { value } = props;
-      const selected = context.get("value") === value;
+      const contentState = getContentState(props);
       return normalize.element({
         ...parts.content.attrs(scope.id),
         dir: prop("dir"),
@@ -163,9 +167,9 @@ function connect(service, normalize) {
         tabIndex: !virtualFocus ? 0 : -1,
         "aria-labelledby": dom.getTriggerId(scope, value),
         role: "tabpanel",
-        "data-selected": dataAttr(selected),
+        "data-selected": dataAttr(contentState.selected),
         "data-orientation": prop("orientation"),
-        hidden: !selected
+        hidden: !contentState.selected
       });
     },
     getIndicatorProps() {

package/dist/tabs.types.d.mts

@@ -1,5 +1,5 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Rect } from '@zag-js/types';
+import { PropTypes, DirectionProperty, CommonProperties, Rect } from '@zag-js/types';
 
 interface ValueChangeDetails {
     value: string;
@@ -15,13 +15,13 @@ interface NavigateDetails {
 interface IntlTranslations {
     listLabel?: string | undefined;
 }
-type ElementIds = Partial<{
-    root: string;
-    trigger: (value: string) => string;
-    list: string;
-    content: (value: string) => string;
-    indicator: string;
-}>;
+interface ElementIds {
+    root?: string | undefined;
+    trigger?: ((value: string) => string) | undefined;
+    list?: string | undefined;
+    content?: ((value: string) => string) | undefined;
+    indicator?: string | undefined;
+}
 interface TabsProps extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the tabs. Useful for composition.
@@ -92,7 +92,8 @@ interface TabsProps extends DirectionProperty, CommonProperties {
 type PropsWithDefault = "orientation" | "activationMode" | "loopFocus";
 type TabsSchema = {
     state: "idle" | "focused";
-    props: RequiredBy<TabsProps, PropsWithDefault>;
+    props: TabsProps;
+    defaultPropKey: PropsWithDefault;
     context: {
         ssr: boolean;
         value: string | null;
@@ -144,6 +145,12 @@ interface ContentProps {
      */
     value: string;
 }
+interface ContentState {
+    /**
+     * Whether the tab content is selected
+     */
+    selected: boolean;
+}
 interface TabsApi<T extends PropTypes = PropTypes> {
     /**
      * The current value of the tabs.
@@ -189,8 +196,12 @@ interface TabsApi<T extends PropTypes = PropTypes> {
     getRootProps: () => T["element"];
     getListProps: () => T["element"];
     getTriggerProps: (props: TriggerProps) => T["button"];
+    /**
+     * Returns the state of the content with the given props
+     */
+    getContentState: (props: ContentProps) => ContentState;
     getContentProps: (props: ContentProps) => T["element"];
     getIndicatorProps: () => T["element"];
 }
 
-export type { ContentProps, ElementIds, FocusChangeDetails, IntlTranslations, NavigateDetails, TabsApi, TabsMachine, TabsProps, TabsSchema, TabsService, TriggerProps, TriggerState, ValueChangeDetails };
+export type { ContentProps, ContentState, ElementIds, FocusChangeDetails, IntlTranslations, NavigateDetails, TabsApi, TabsMachine, TabsProps, TabsSchema, TabsService, TriggerProps, TriggerState, ValueChangeDetails };

package/dist/tabs.types.d.ts

@@ -1,5 +1,5 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Rect } from '@zag-js/types';
+import { PropTypes, DirectionProperty, CommonProperties, Rect } from '@zag-js/types';
 
 interface ValueChangeDetails {
     value: string;
@@ -15,13 +15,13 @@ interface NavigateDetails {
 interface IntlTranslations {
     listLabel?: string | undefined;
 }
-type ElementIds = Partial<{
-    root: string;
-    trigger: (value: string) => string;
-    list: string;
-    content: (value: string) => string;
-    indicator: string;
-}>;
+interface ElementIds {
+    root?: string | undefined;
+    trigger?: ((value: string) => string) | undefined;
+    list?: string | undefined;
+    content?: ((value: string) => string) | undefined;
+    indicator?: string | undefined;
+}
 interface TabsProps extends DirectionProperty, CommonProperties {
     /**
      * The ids of the elements in the tabs. Useful for composition.
@@ -92,7 +92,8 @@ interface TabsProps extends DirectionProperty, CommonProperties {
 type PropsWithDefault = "orientation" | "activationMode" | "loopFocus";
 type TabsSchema = {
     state: "idle" | "focused";
-    props: RequiredBy<TabsProps, PropsWithDefault>;
+    props: TabsProps;
+    defaultPropKey: PropsWithDefault;
     context: {
         ssr: boolean;
         value: string | null;
@@ -144,6 +145,12 @@ interface ContentProps {
      */
     value: string;
 }
+interface ContentState {
+    /**
+     * Whether the tab content is selected
+     */
+    selected: boolean;
+}
 interface TabsApi<T extends PropTypes = PropTypes> {
     /**
      * The current value of the tabs.
@@ -189,8 +196,12 @@ interface TabsApi<T extends PropTypes = PropTypes> {
     getRootProps: () => T["element"];
     getListProps: () => T["element"];
     getTriggerProps: (props: TriggerProps) => T["button"];
+    /**
+     * Returns the state of the content with the given props
+     */
+    getContentState: (props: ContentProps) => ContentState;
     getContentProps: (props: ContentProps) => T["element"];
     getIndicatorProps: () => T["element"];
 }
 
-export type { ContentProps, ElementIds, FocusChangeDetails, IntlTranslations, NavigateDetails, TabsApi, TabsMachine, TabsProps, TabsSchema, TabsService, TriggerProps, TriggerState, ValueChangeDetails };
+export type { ContentProps, ContentState, ElementIds, FocusChangeDetails, IntlTranslations, NavigateDetails, TabsApi, TabsMachine, TabsProps, TabsSchema, TabsService, TriggerProps, TriggerState, ValueChangeDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.2",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/tabs",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/tabs"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -26,11 +29,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0",
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.0"
+    "@zag-js/anatomy": "2.0.0-next.2",
+    "@zag-js/dom-query": "2.0.0-next.2",
+    "@zag-js/utils": "2.0.0-next.2",
+    "@zag-js/core": "2.0.0-next.2",
+    "@zag-js/types": "2.0.0-next.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -64,7 +67,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }