@zag-js/tabs 1.22.1 → 1.24.0

package/dist/index.d.mts

@@ -21,9 +21,9 @@ interface IntlTranslations {
 }
 type ElementIds = Partial<{
     root: string;
-    trigger: string;
+    trigger: (value: string) => string;
     list: string;
-    content: string;
+    content: (value: string) => string;
     indicator: string;
 }>;
 interface TabsProps extends DirectionProperty, CommonProperties {

package/dist/index.d.ts

@@ -21,9 +21,9 @@ interface IntlTranslations {
 }
 type ElementIds = Partial<{
     root: string;
-    trigger: string;
+    trigger: (value: string) => string;
     list: string;
-    content: string;
+    content: (value: string) => string;
     indicator: string;
 }>;
 interface TabsProps extends DirectionProperty, CommonProperties {

package/dist/index.js

@@ -11,8 +11,8 @@ var anatomy = anatomy$1.createAnatomy("tabs").parts("root", "list", "trigger", "
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
 var getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
-var getContentId = (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`;
-var getTriggerId = (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`;
+var getContentId = (ctx, id) => ctx.ids?.content?.(id) ?? `tabs:${ctx.id}:content-${id}`;
+var getTriggerId = (ctx, id) => ctx.ids?.trigger?.(id) ?? `tabs:${ctx.id}:trigger-${id}`;
 var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
 var getListEl = (ctx) => ctx.getById(getListId(ctx));
 var getContentEl = (ctx, id) => ctx.getById(getContentId(ctx, id));
@@ -111,8 +111,8 @@ function connect(service, normalize) {
         "aria-label": translations?.listLabel,
         onKeyDown(event) {
           if (event.defaultPrevented) return;
-          if (!domQuery.isSelfTarget(event)) return;
           if (domQuery.isComposingEvent(event)) return;
+          if (!domQuery.contains(event.currentTarget, domQuery.getEventTarget(event))) return;
           const keyMap = {
             ArrowDown() {
               if (isHorizontal) return;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { isAnchorElement, trackElementRect, nextTick, raf, getFocusables, prevById, nextById, clickIfLink, itemById, queryAll, dataAttr, isOpeningInNewTab, isSafari, isSelfTarget, isComposingEvent, getEventKey } from '@zag-js/dom-query';
+import { isAnchorElement, trackElementRect, nextTick, raf, getFocusables, prevById, nextById, clickIfLink, itemById, queryAll, dataAttr, isOpeningInNewTab, isSafari, isComposingEvent, contains, getEventTarget, getEventKey } from '@zag-js/dom-query';
 import { last, first, createSplitProps } from '@zag-js/utils';
 import { setup } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
@@ -9,8 +9,8 @@ var anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content",
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
 var getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
-var getContentId = (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`;
-var getTriggerId = (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`;
+var getContentId = (ctx, id) => ctx.ids?.content?.(id) ?? `tabs:${ctx.id}:content-${id}`;
+var getTriggerId = (ctx, id) => ctx.ids?.trigger?.(id) ?? `tabs:${ctx.id}:trigger-${id}`;
 var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
 var getListEl = (ctx) => ctx.getById(getListId(ctx));
 var getContentEl = (ctx, id) => ctx.getById(getContentId(ctx, id));
@@ -109,8 +109,8 @@ function connect(service, normalize) {
         "aria-label": translations?.listLabel,
         onKeyDown(event) {
           if (event.defaultPrevented) return;
-          if (!isSelfTarget(event)) return;
           if (isComposingEvent(event)) return;
+          if (!contains(event.currentTarget, getEventTarget(event))) return;
           const keyMap = {
             ArrowDown() {
               if (isHorizontal) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "1.22.1",
+  "version": "1.24.0",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,11 +26,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.22.1",
-    "@zag-js/dom-query": "1.22.1",
-    "@zag-js/utils": "1.22.1",
-    "@zag-js/core": "1.22.1",
-    "@zag-js/types": "1.22.1"
+    "@zag-js/anatomy": "1.24.0",
+    "@zag-js/dom-query": "1.24.0",
+    "@zag-js/utils": "1.24.0",
+    "@zag-js/core": "1.24.0",
+    "@zag-js/types": "1.24.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"