@zag-js/splitter 1.41.0 → 2.0.0-next.0

package/dist/splitter.connect.js

@@ -167,10 +167,9 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...import_splitter.parts.root.attrs,
+        ...import_splitter.parts.root.attrs(scope.id),
         "data-orientation": orientation,
         "data-dragging": (0, import_dom_query.dataAttr)(dragging),
-        id: dom.getRootId(scope),
         dir: prop("dir"),
         style: {
           display: "flex",
@@ -184,14 +183,13 @@ function connect(service, normalize) {
     getPanelProps(props) {
       const { id } = props;
       return normalize.element({
-        ...import_splitter.parts.panel.attrs,
+        ...import_splitter.parts.panel.attrs(scope.id),
         "data-orientation": orientation,
         "data-dragging": (0, import_dom_query.dataAttr)(dragging),
         dir: prop("dir"),
         "data-id": id,
         "data-index": (0, import_panel.findPanelIndex)(prop("panels"), id),
         id: dom.getPanelId(scope, id),
-        "data-ownedby": dom.getRootId(scope),
         style: getPanelStyle(id)
       });
     },
@@ -199,12 +197,11 @@ function connect(service, normalize) {
     getResizeTriggerIndicator(props) {
       const triggerState = getResizeTriggerState(props);
       return normalize.element({
-        ...import_splitter.parts.resizeTriggerIndicator.attrs,
+        ...import_splitter.parts.resizeTriggerIndicator.attrs(scope.id),
         "data-orientation": orientation,
         "data-focus": (0, import_dom_query.dataAttr)(triggerState.focused),
         "data-dragging": (0, import_dom_query.dataAttr)(triggerState.dragging),
-        "data-disabled": (0, import_dom_query.dataAttr)(triggerState.disabled),
-        "data-ownedby": dom.getRootId(scope)
+        "data-disabled": (0, import_dom_query.dataAttr)(triggerState.disabled)
       });
     },
     getResizeTriggerProps(props) {
@@ -213,12 +210,11 @@ function connect(service, normalize) {
       const resolvedId = resolveResizeTriggerId(id);
       const aria = (0, import_aria.getAriaValue)(getResolvedSizes(), panels, resolvedId);
       return normalize.element({
-        ...import_splitter.parts.resizeTrigger.attrs,
+        ...import_splitter.parts.resizeTrigger.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getResizeTriggerId(scope, id),
         role: "separator",
         "data-id": id,
-        "data-ownedby": dom.getRootId(scope),
         tabIndex: triggerState.disabled ? void 0 : 0,
         "aria-valuenow": aria.valueNow,
         "aria-valuemin": aria.valueMin,

package/dist/splitter.connect.mjs

@@ -135,10 +135,9 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...parts.root.attrs,
+        ...parts.root.attrs(scope.id),
         "data-orientation": orientation,
         "data-dragging": dataAttr(dragging),
-        id: dom.getRootId(scope),
         dir: prop("dir"),
         style: {
           display: "flex",
@@ -152,14 +151,13 @@ function connect(service, normalize) {
     getPanelProps(props) {
       const { id } = props;
       return normalize.element({
-        ...parts.panel.attrs,
+        ...parts.panel.attrs(scope.id),
         "data-orientation": orientation,
         "data-dragging": dataAttr(dragging),
         dir: prop("dir"),
         "data-id": id,
         "data-index": findPanelIndex(prop("panels"), id),
         id: dom.getPanelId(scope, id),
-        "data-ownedby": dom.getRootId(scope),
         style: getPanelStyle(id)
       });
     },
@@ -167,12 +165,11 @@ function connect(service, normalize) {
     getResizeTriggerIndicator(props) {
       const triggerState = getResizeTriggerState(props);
       return normalize.element({
-        ...parts.resizeTriggerIndicator.attrs,
+        ...parts.resizeTriggerIndicator.attrs(scope.id),
         "data-orientation": orientation,
         "data-focus": dataAttr(triggerState.focused),
         "data-dragging": dataAttr(triggerState.dragging),
-        "data-disabled": dataAttr(triggerState.disabled),
-        "data-ownedby": dom.getRootId(scope)
+        "data-disabled": dataAttr(triggerState.disabled)
       });
     },
     getResizeTriggerProps(props) {
@@ -181,12 +178,11 @@ function connect(service, normalize) {
       const resolvedId = resolveResizeTriggerId(id);
       const aria = getAriaValue(getResolvedSizes(), panels, resolvedId);
       return normalize.element({
-        ...parts.resizeTrigger.attrs,
+        ...parts.resizeTrigger.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getResizeTriggerId(scope, id),
         role: "separator",
         "data-id": id,
-        "data-ownedby": dom.getRootId(scope),
         tabIndex: triggerState.disabled ? void 0 : 0,
         "aria-valuenow": aria.valueNow,
         "aria-valuemin": aria.valueMin,

package/dist/splitter.dom.d.mts

@@ -7,9 +7,9 @@ declare const getRootId: (ctx: Scope) => any;
 declare const getResizeTriggerId: (ctx: Scope, id: string) => any;
 declare const getLabelId: (ctx: Scope) => any;
 declare const getPanelId: (ctx: Scope, id: string | number) => any;
-declare const getPanelEls: (ctx: Scope) => HTMLElement[];
 declare const getGlobalCursorId: (ctx: Scope) => string;
 declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getPanelEls: (ctx: Scope) => HTMLElement[];
 declare const getResizeTriggerEl: (ctx: Scope, id: string | null | undefined) => HTMLElement | null;
 declare const getPanelEl: (ctx: Scope, id: string | number) => HTMLElement | null;
 declare const resolveResizeTriggerId: (ctx: Scope, id: ResizeTriggerId) => `${string}:${string}` | null;

package/dist/splitter.dom.d.ts

@@ -7,9 +7,9 @@ declare const getRootId: (ctx: Scope) => any;
 declare const getResizeTriggerId: (ctx: Scope, id: string) => any;
 declare const getLabelId: (ctx: Scope) => any;
 declare const getPanelId: (ctx: Scope, id: string | number) => any;
-declare const getPanelEls: (ctx: Scope) => HTMLElement[];
 declare const getGlobalCursorId: (ctx: Scope) => string;
 declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getPanelEls: (ctx: Scope) => HTMLElement[];
 declare const getResizeTriggerEl: (ctx: Scope, id: string | null | undefined) => HTMLElement | null;
 declare const getPanelEl: (ctx: Scope, id: string | number) => HTMLElement | null;
 declare const resolveResizeTriggerId: (ctx: Scope, id: ResizeTriggerId) => `${string}:${string}` | null;

package/dist/splitter.dom.js

@@ -38,15 +38,16 @@ __export(splitter_dom_exports, {
 });
 module.exports = __toCommonJS(splitter_dom_exports);
 var import_dom_query = require("@zag-js/dom-query");
-var getRootId = (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`;
-var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`;
-var getPanelId = (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`;
-var getPanelEls = (ctx) => (0, import_dom_query.queryAll)(getRootEl(ctx), `[data-part=panel][data-ownedby='${CSS.escape(getRootId(ctx))}']`);
-var getGlobalCursorId = (ctx) => `splitter:${ctx.id}:global-cursor`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getResizeTriggerEl = (ctx, id) => id != null ? ctx.getById(getResizeTriggerId(ctx, id)) : null;
-var getPanelEl = (ctx, id) => ctx.getById(getPanelId(ctx, id));
+var import_splitter = require("./splitter.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `${ctx.id}:splitter:${id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getPanelId = (ctx, id) => ctx.ids?.panel?.(id) ?? `${ctx.id}:panel:${id}`;
+var getGlobalCursorId = (ctx) => `${ctx.id}:global-cursor`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(import_splitter.parts.root));
+var getPanelEls = (ctx) => ctx.queryAll(ctx.selector(import_splitter.parts.panel));
+var getResizeTriggerEl = (ctx, id) => id != null ? ctx.query(`${ctx.selector(import_splitter.parts.resizeTrigger)}[data-id="${id}"]`) : null;
+var getPanelEl = (ctx, id) => ctx.query(`${ctx.selector(import_splitter.parts.panel)}[data-id="${id}"]`);
 var getPanelIdFromEl = (el) => {
   return (0, import_dom_query.isHTMLElement)(el) && el.dataset.part === "panel" ? el.dataset.id : void 0;
 };
@@ -81,7 +82,7 @@ var getCursor = (state, x) => {
   return cursor;
 };
 var getResizeTriggerEls = (ctx) => {
-  return (0, import_dom_query.queryAll)(getRootEl(ctx), `[role=separator][data-ownedby='${CSS.escape(getRootId(ctx))}']`);
+  return ctx.queryAll(ctx.selector(import_splitter.parts.resizeTrigger));
 };
 var getGlobalCursorEl = (ctx) => {
   return ctx.getDoc().getElementById(getGlobalCursorId(ctx));

package/dist/splitter.dom.mjs

@@ -1,16 +1,17 @@
 import "./chunk-QZ7TP4HQ.mjs";
 
 // src/splitter.dom.ts
-import { isHTMLElement, queryAll } from "@zag-js/dom-query";
-var getRootId = (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`;
-var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`;
-var getPanelId = (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`;
-var getPanelEls = (ctx) => queryAll(getRootEl(ctx), `[data-part=panel][data-ownedby='${CSS.escape(getRootId(ctx))}']`);
-var getGlobalCursorId = (ctx) => `splitter:${ctx.id}:global-cursor`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getResizeTriggerEl = (ctx, id) => id != null ? ctx.getById(getResizeTriggerId(ctx, id)) : null;
-var getPanelEl = (ctx, id) => ctx.getById(getPanelId(ctx, id));
+import { isHTMLElement } from "@zag-js/dom-query";
+import { parts } from "./splitter.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `${ctx.id}:splitter:${id}`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getPanelId = (ctx, id) => ctx.ids?.panel?.(id) ?? `${ctx.id}:panel:${id}`;
+var getGlobalCursorId = (ctx) => `${ctx.id}:global-cursor`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
+var getPanelEls = (ctx) => ctx.queryAll(ctx.selector(parts.panel));
+var getResizeTriggerEl = (ctx, id) => id != null ? ctx.query(`${ctx.selector(parts.resizeTrigger)}[data-id="${id}"]`) : null;
+var getPanelEl = (ctx, id) => ctx.query(`${ctx.selector(parts.panel)}[data-id="${id}"]`);
 var getPanelIdFromEl = (el) => {
   return isHTMLElement(el) && el.dataset.part === "panel" ? el.dataset.id : void 0;
 };
@@ -45,7 +46,7 @@ var getCursor = (state, x) => {
   return cursor;
 };
 var getResizeTriggerEls = (ctx) => {
-  return queryAll(getRootEl(ctx), `[role=separator][data-ownedby='${CSS.escape(getRootId(ctx))}']`);
+  return ctx.queryAll(ctx.selector(parts.resizeTrigger));
 };
 var getGlobalCursorEl = (ctx) => {
   return ctx.getDoc().getElementById(getGlobalCursorId(ctx));

package/package.json

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